稳中向好
0%

Redux为什么需要中间件来处理异步数据流？

发表于

我们明明可以在async之后直接调用dispatch，为什么又要多此一举引入中间件呢？

为什么需要中间件来处理Redux异步数据流？

如果异步之后直接Dispatch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// action creator
function loadData(dispatch, userId) { // needs to dispatch, so it is first argument
  return fetch(`http://data.com/${userId}`)
    .then(res => res.json())f
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // don't forget to pass dispatch
}

如果使用 react-thunk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// action creator
function loadData(userId) {
  return dispatch => fetch(`http://data.com/${userId}`) // Redux Thunk handles these
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// component
componentWillMount() {
  this.props.dispatch(loadData(this.props.userId)); // dispatch like you usually do
}

可以看到，thunk 只是更改了你的写法。因为不使用 thunk 你需要每次传递给异步函数 dispatch，使用 thunk 后在组件中就可以调用 dispatch，组件不再需要关注 dispatch 派发的函数是不是异步，组件只是发出一个请求而已。组件connect的数据通过 dispatch => reducer 流程最后会触发更新。

Redux-thunk出现是为了解决什么问题？

优雅地进行异步调用，但thunk并不能终止请求，比如component unmounted 之后API调用结束这时会产生副作用，容易导致内存泄漏。
react saga就是为解决上述问题而生的，当然，后面再说 :)

How to dispatch a Redux action with a timeout?