24、Redux异步操作与TypeScript高级类型应用

Redux异步操作与TypeScript高级类型应用

1. Redux中添加异步操作

在引入Redux之前，异步操作通常是将ActionCable调用和reducer调用组合在一起。但这种组合方式有些笨拙，需要时刻记住这两部分要一起调用。我们期望Redux提供的store能让我们将异步操作与常规的reducer调用混合使用。

为了实现这一点，我们将使用Redux的一个插件——Redux Thunk。Redux Thunk的核心思想很简单，之前传递给reducer的action只是数据对象，而Redux Thunk允许传递不同类型的参数给dispatch，即一个返回函数的函数，这也是它被称为“thunk”的原因。

例如，之前的调用是 dispatch({type: "doSomething"}) ，现在可以写成 dispatch(doSomething()) ，其中 doSomething 函数返回一个函数：

const doSomething = () => {
  return async (dispatch) => {
    await doSomethingAsynchronous()
    dispatch({ type: "doSomethingElse" })
  }
}

添加Redux Thunk后，当Redux接收到的dispatch参数是一个函数而非action类型时，它会执行该函数并传递dispatch参数（以及 g