Redux产生的需求前景
    在React项目中随着项目体积越来越大项目中的组件层级也会越来也深,我们之前学习到的通过组件props传参给下级的方法,当涉及层级太深的情况下,代码会显得很臃肿,而且难以维护.这个时候我们就需要一个中间人,也就是状态管理容器(本人的理解)来管理组件之间的通信以及数据交互

    安装和导入

    1. npm install redux --save //或cnpm install redux
    2. npm install react-redux --save //或cnpm install react-redux

    Redux的基本概念

    1. redux官方介绍 : redux是一个javescript状态容器,可以提供可预测的状态管理
    2. javescript状态容器 : 这里说的状态容器其实就是一个javascript对象,可以用来存储页面所需要的各种数据格式,实现页面交互的基本需求.比如页面上的table组件中的Loading显示,当页面发生请求的时候是显示,页面请求完毕之后是隐藏,这种都是状态,都可以保存在状态容器中统一管理
    3. 预测的状态管理 : redux提供的是一种科学的状态管理方式,状态的修改都可以预测,当代码出现问题的时候可以很快的找到问题的发生点.比如一个计算器原变量为0不管你是加1还是减1都可以明显的感知到运算的结果,redux实现就是这种可以预测结果的状态管理机制

    Redux的基本原则

    • 单一数据源 : 整个项目的数据存储在一个 Object tree 中,只有一个单一的store
    • state是只读的 : 唯一改变state的方式就是触发action,action是一个可以描述事件发生变化的对象
    • 使用纯函数来修改 : 为了描述action如何修改state,需要编写reduce,reduce只是一些纯函数,他可以接收到state,action,并返回一个新的state

    Redux的基本API
    Store

    • Store是用来存储应用数据的地方,包含了整个应用的所有数据,并且一个应用只能有一个Store
    • 是一个单一数据源,并且是只读的
    • 可以通过store.getState()方法获取state
    • 提供subscribe()方法注册监听器
    • 提供subscribe方法注销监听器

    State

    • Store对象包含所有数据,如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State
    • State对应的是视图View,State有什么样的数据就可以知道View展示什么样的效果

    Action

    • action是一个js对象
    • action人如其名是一个”动作”,它是对变化的描述
    • action必须有一个type属性,同时可以传入参数payload提供给reduce函数使用

    Reduce

    • reduce是一个纯函数
    • 可以通过触发action调用reduce函数
    • reduce可以接收到2个参数state和action,并且返回一个新的state
    • 针对state所需要做出的特殊操作都可以写在reduce里面(一般处理都会在View里面完成,只需要传入需要更改的state即可)
    • reduce函数最重要的特征是因为他是纯函数,所以相同的输入一定会得到相同的输出保证每次得到结果都是相同的

    Dispatch

    • dispatch是View触发action的唯一方法
    • 通常只会传入3个属性和属性值 : type、payload、callback
      1. dispatch({
      2. type:"add"
      3. payload: 1,
      4. callback:()=>{
      5.     //回调处理逻辑
      6. }
      7. })

    Redux的工作流程
    Redux小结 - 图1

    1. 用户在View视图上通过diatch触发action传入type和payload
    2. store启动reduce,并且传入payload和state,reduce通过传入的参数,处理之后返回一个全新的state
    3. reduce处理完毕之后,更新state,因为store监听了state的变化,state发生改变了之后会把新的state更新到View

    Redux的轮子React-Redux

    • react-redux提供了2个主要的api : connect 和Provider
    • Provider可以接收store,用于更新View,只要把需要展示的组件写在Provider里面就可以实时监听state的变化

    Redux的中间件
    redux-thunk

    • 可以让redux在工作流中加入异步操作
    • 可以在action中处理逻辑问题,而不是像之前的只能单纯的返回一个action对象了
    • thunk的主要逻辑是可以在ActionCreators里面返回一个函数,然后在函数里面可以编写业务需要的逻辑,比如异步操作,在异步操作结束之后通过判断action对象类型来决定是直接用next返回action还是调用action函数(此时因为是异步操作所以是一个函数,因为加入了异步加载逻辑)

    redux-saga

    • 跟thunk的基本逻辑是一样的,都可以让我们在action的操作中加入异步操作
    • 比thunk更加强大,他可以允许我们将异步操作的代码单独actionCreator这个文件中抽离出来,放在一个单独的文件中
    • 可以用takeEvery方法接收action处理action,执行之后可以用put方法调用reduce返回一个新的state,简单的来说就是把同步跟异步处理分离开来了

    如下所示:

    1. import { takeEvery, put, delay } from 'redux-saga/effects';
    2. import { add } from '../actions/conter.actions.js';
    3. // takeEvery 接收 action
    4. // put 触发 action
    5. function* increment_async_fn(action) {
    6.     yield delay(2000);
    7.     yield put(add(action.payload))
    8. }
    10. export default function* counterSaga() {
    11.     // 接收action,处理action
    12.     yield takeEvery("add_async", increment_async_fn)
    13. }

    小结的具体实例代码可以参考:https://gitee.com/xielingyun879475908/redux