React-Redux-2 中间件与异步操作

该文为阅读笔记，建议大家去看阮一峰老师的原文，若有侵权请联系删除

中间件

为什么引入中间件？

实现异步操作结束后自动执行Reducer

放置位置

中间件是一个函数，改造了store.dispatch方法，即在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。示例代码如下：

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

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

用法

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(logger)
);

• redux-logger提供一个生成器createLogger，可以生成日志中间件logger。然后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。
• createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。
• createStore方法可以接受整个应用的初始状态作为第二个参数，applyMiddleware则作为第三个参数

applyMiddlewares

• 概念：Redux 的原生方法
• 作用：将所有中间件组成一个数组，依次执行 源码请参考原文

异步操作

• 同步与异步操作的区别
  • 同步操作只发出一种action，异步操作发出三种Action（发起时，成功时，失败时）
  • 如向服务器取数据

// 写法一：名称相同，参数不同
{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }

// 写法二：名称不同
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }