• (六)Redux进阶


    1 UI组件与容器组件的拆分

    UI组件(傻瓜组件):只负责页面显示,没有任何逻辑

    容器组件(聪明组件):并不去管UI到底长成什么样,关注的是整个业务逻辑

    2 无状态组件

    一个普通的函数就是无状态组件 开销比较低

    而class..extends..要执行一些生命周期函数

    结论:当定义一个UI组件 没有逻辑操作的时候一般使用无状态组件。

    3 Redux中 发送异步请求获取数据

    4 使用Redux-thunk中间件进行ajax请求发送

    Redux-thunk可以把复杂的异步请求逻辑放到action里处理 而不是都写到组件里。

    这时action已经不是一个对象了,可以是一个函数

    而且函数返回的第一参数是dispatch

    5 到底什么是redux的中间件

    redux中间件的中间指的是action和store之间

    以前action只能是一个对象,派发给store

    现在使用了redux-thunk后 action可以是一个函数

    实际上的中间件就是对dispatch的一个升级和封装

    最原始的就是把对象传递给store,现在使用redux-thunk后

    调用dispatch方法,如果传入的是一个对象,那和之前一样,

    假设传入的是一个函数, 会让你函数先执行,执行完的时候,需要调用store时候再去调用

    市场上的两种中间件:

    redux-thunk是把异步请求放到action里面

    redux-sage是把异步请求放到单独的文件里面去处理

    6 Redux-saga中间件的使用

    把异步逻辑拆分到saga里面去。

    8 react-redux的使用

    这个包帮助我们在react中更加方便的使用redux

    1.Provider

    这个组件之下所有的组件都有store了

    在子组件中,之前:

    之后:

    (让组件和store做连接)

    再进一步:

    口诀:

    connect是连接 TodoList和store做连接,通过mapStateToProps这个映射关系

    再进异步:

    Provider 提供器

    然后通过connect方法做连接

    10 使用React-redux完成TodoList功能

    todolist是一个UI组件

    但是connect把他包装后使其变成了一个容器组件

  • 相关阅读:
    zkw费用流
    luogu5212/bzoj2555 substring(后缀自动机+动态树)
    后缀数据结构模板2
    后缀数据结构模板1
    通用动态树(Link-Cut Tree)模板
    上下界网络流总结
    多项式多点求值
    拉格朗日反演
    多项式板子·新
    luogu2387 [NOI2014]魔法森林
  • 原文地址:https://www.cnblogs.com/eret9616/p/9943302.html
Copyright © 2020-2023  润新知