zoukankan      html  css  js  c++  java
  • React状态管理Redux(一)

    一 Redux: Redux基本使用

    1 Redux是一个独立的、专门用于做状态管理的JS库。不是react插件库,这一点要和react-redux区分开。redux可以用在react(angular, vue等)项目中,但基本是与react配合使用。

    2 Redux作用:管理react应用中多个组件共享的状态。

    3 Redux工作流程:

     解释:

    react组件中含有状态state;不用redux的情况下,在react中更新状态的方法是setState()。

    在redux中改变状态的步骤是:

    • 创建action,也就是组件所发生的事件。action里有事件名称type和状态数据data。
    • 分发action(即dispatch(action))给储存状态(state)的仓库store
    • 管理员reducer是个纯函数,负责处理管理仓库中的状态。reducer函数的参数是旧的状态和action。
    • 管理员reducer把处理好的新状态交给仓库store
    • react组件从仓库store中接收变化后的状态。完毕。
    • 主要做的部分是分发action和reducer产生新的状态交给store。

    4 Redux三个核心概念:

    action:action相当于一个事件对象,有事件名和事件内容;包含两个属性type:事件类型 ;data携带的数据。

    reducer:纯函数,根据老的state和action,产生新的state。

    store:把state、action 与 reducer联系在一起的对象。

    二 React-redux:并不是redux的内置库,而是独立的一个库;一般把所有组件分为两类:

    1 第一类: UI组件

    • 只负责UI的呈现,不带有任何的业务逻辑
    • 通过props接收数据(一般数据和函数)
    • 不使用redux和react-redux的任何api
    • 一般保存在components文件夹下

    2 第二类: 容器组件

    • 负责管理数据和业务逻辑,不负责UI呈现
    • 使用Redux和react-redux的api
    • 一般保存在containers文件夹下

     3 React-redux有两个API:

    3.1 第一个API: <Provider store={store}>根组件</Provider>

    • 用了Provider 以后,store就放在Provider 前面标签里面。它里面的所有组件都可以得到state数据了
    • 根组件里就不需要加store了
    • 注意,这里的根组件,就变成了connect所在的组件。因为Provider包含的根组件要始终和connect保持一致
    • Provider 代替根组件来管理store。有Provider 才能用connect连接

    3.2 第二个API: connect(reducer管理的状态, action函数)(连接的UI组件)

    connect([mapStateToPrps],[mapDispatchToProps],[mergeProps],[options])

     

    三 applyMiddleware(中间件):深入理解中间件

    redux默认是不能进行异步处理的:

    同步的action返回的是一个对象=> ({ })。

    异步action返回的是一个函数 => { },在返回的函数里面,执行异步代码。

    推荐阅读:

    前台中台系统常见问题剖析与解决方案

  • 相关阅读:
    bzoj-2748 2748: [HAOI2012]音量调节(dp)
    bzoj-2338 2338: [HNOI2011]数矩形(计算几何)
    bzoj-3444 3444: 最后的晚餐(组合数学)
    codeforces 709E E. Centroids(树形dp)
    codeforces 709D D. Recover the String(构造)
    codeforces 709C C. Letters Cyclic Shift(贪心)
    codeforces 709B B. Checkpoints(水题)
    codeforces 709A A. Juicer(水题)
    Repeat Number
    hdu 1003 Max Sum (动态规划)
  • 原文地址:https://www.cnblogs.com/terrymin/p/15632498.html
Copyright © 2011-2022 走看看