typescript 为什么要使用 redux-thunk？

Why use redux-thunk?

提问by micahblu

I don't understand the need for something like redux-thunk. From what I understand a thunkis a function which returns a function. The wrapped expressions and the use of middleware appear to me to do more to obfuscate what is happening. Taken from redux-thunk's sample code

我不明白需要像redux-thunk. 据我所知， athunk是一个返回函数的函数。在我看来，包装的表达式和中间件的使用可以做更多的事情来混淆正在发生的事情。取自redux-thunk的示例代码

import thunk from 'redux-thunk';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);


// Meet thunks.
// A thunk is a function t hat returns a function.
// This is a thunk.

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

// Thunk middleware lets me dispatch thunk async actions
// as if they were actions!

store.dispatch(
  makeASandwichWithSecretSauce('Me')
);

The above code could be written far more concisely and intuitive:

上面的代码可以写得更简洁直观：

fetchSecretSauce().then(
  sauce => store.dispatch(makeASandwich('Me', sauce)),
  error => store.dispatch(apologize('The Sandwich Shop', forPerson, error))
)

My question is what need is redux-thunkfulfilling and how does it improve on existing solutions similar to the example above.

我的问题是redux-thunk满足什么需求以及它如何改进与上述示例类似的现有解决方案。

回答by Mo Ismat

Redux Thunk teaches Redux to recognize special kinds of actions that are in fact functions.

Redux Thunk 教 Redux 识别实际上是函数的特殊动作。

When an action creator returns a function, that function will get executed by the Redux Thunk middleware. This function doesn't need to be pure; it is thus allowed to have side effects, including executing asynchronous API calls. The function can also dispatch actions.

当动作创建者返回一个函数时，该函数将由 Redux Thunk 中间件执行。这个函数不需要是纯函数；因此允许有副作用，包括执行异步 API 调用。该函数还可以分派动作。

The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met.

thunk 可用于延迟动作的调度，或仅在满足特定条件时才调度。

If Redux Thunk middleware is enabled, any time you attempt to dispatch a function instead of an action object, the middleware will call that function with dispatch method itself as the first argument.

如果启用了 Redux Thunk 中间件，则任何时候您尝试调度函数而不是操作对象时，中间件都会调用该函数，并将调度方法本身作为第一个参数。

And then since we “taught” Redux to recognize such “special” action creators (we call them thunk action creators), we can now use them in any place where we would use regular action creators.

然后，由于我们“教”了 Redux 识别此类“特殊”动作创建器（我们称它们为 thunk 动作创建器），因此我们现在可以在任何需要使用常规动作创建器的地方使用它们。

Check this great answer from Dan Abramov himself, it covers everything: https://stackoverflow.com/a/35415559/5714933

检查 Dan Abramov 本人的这个很棒的答案，它涵盖了所有内容：https: //stackoverflow.com/a/35415559/5714933

Also check these links for more info:

另请查看这些链接以获取更多信息：

https://github.com/gaearon/redux-thunk#motivationhttp://redux.js.org/docs/advanced/AsyncActions.html

https://github.com/gaearon/redux-thunk#motivation http://redux.js.org/docs/advanced/AsyncActions.html