redux之同步/异步控制数据

一、

1、同步

Redux 通过 store.dispatch() 将 action 传到 store。

Redux 应用中数据的生命周期遵循下面 4 个步骤：

1. 调用 store.dispatch(action)。
2. Redux store 调用传入的 reducer 函数。
3. 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
4. Redux store 保存了根 reducer 返回的完整 state 树。

具体请戳这里：https://blog.csdn.net/mChales_Liu/article/details/112452689

 

2、异步

redux-saga

redux-saga 是一个 redux 中间件。

安装 redux-saga

npm install --save redux-saga
或
yarn add redux-saga

 

 

3、高级讲解

https://www.cnblogs.com/bingooo/p/5500108.html

 

 

一、中间件

1、什么是中间件？

在阮一峰老师的博客中探索了中间件的定义过程：

为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？

• Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。
• View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。
• Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。

想来想去，只有发送 Action 的这个步骤，即store.dispatch()方法，可以添加功能。举例来说，要添加日志功能，把 Action 和 State 打印出来，可以对store.dispatch进行如下改造。

let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}

上面代码中，对store.dispatch进行了重定义，在发送 Action 前后添加了打印功能。这就是中间件的雏形。

结论：中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

原文请戳：Redux 入门教程（二）：中间件与异步操作

2、redux 与中间件

在发出 Action 和执行 Reducer 这两步之间，会经过中间件 middlewares，所有的 side effect（副作用）操作，都会在这里执行，然后再经由 reducer 更新 state，最后传递到 view 完成 MVC 的数据流循环。如下图：

（1）、如何在 redux 中使用中间件？

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';// 引入中间件
const logger = createLogger();// 创建中间件的实例

const store = createStore(
  reducer,
  applyMiddleware(logger)// 将 中间件实例 与 数据仓库 绑定
);

【注意】

• createStore方法可以接受 3 个参数：一个 reducer 函数、（可选的）整个应用的初始 state 和 applyMiddleware。
  • reducer 函数接收 2 个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。
• 中间件有次序有讲究。

const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

上面代码中，applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。

 

二、redux-thunk

1、

 

三、redux-saga