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返回的是一个函数 => { },在返回的函数里面,执行异步代码。

    推荐阅读:

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

  • 相关阅读:
    个人最终总结
    电梯调度的改进
    电梯调度程序
    读程序的修改
    对wordcount单词字母部分的修改
    wordcount
    读程序
    单元测试
    Microsoft Visual Studio 2013安装及试用
    附加题(二)——沈航软件工程期末附加作业
  • 原文地址:https://www.cnblogs.com/terrymin/p/15632498.html
Copyright © 2011-2022 走看看