Question

我很难理解redux中间件以及它在Redux商店中的配置方式。例如，我有以下示例

const store = compose(
  resetRedux('LOGOUT_USER'),
  applyMiddleware(...middlewares),
)(createStore)(rootReducer, initialState);

resetRedux是一个中间件，在调度字符串LOGOUT_USER时基本上会重置整个redux存储。这很好，但是，如果我在console.log中间件中放置一个resetRedux，它只会被调用一次，这很奇怪，考虑到我想每次都需要检查一下动作才能能够决定是否重置商店。

export default function resetMiddleware(types = ['RESET']) {
  return (next) => (reducer, initialState) => {
    const resetTypes = Array.isArray(types) ? types : [types];
    console.log('THIS IS ONLY CALLED ONCE??!')
    const enhanceReducer = (state, action) => {
      if (~resetTypes.indexOf(action.type)) {
        state = undefined;
      }
      return reducer(state, action);
    };
    return next(enhanceReducer, initialState);
  }
};

所以，我很好奇当console.log只调用一次时这是如何工作的。

Answer 1

你会混淆和混淆中间件＆＃34;和＃34;存储增强剂＆＃34;。您撰写的resetRedux件实际上是一个＆＃34;商店增强器＆＃34;而不是中间件。

真正的中间件将为每个被调度的动作执行其主体。在创建商店时，商店增强器本身会被评估/执行一次。您将返回的 reducer 将针对每个操作执行，因为您正在创建一个包含任何＆＃34; real＆＃34; reducer是提供给createStore的。

作为附录，我的React / Redux链接列表的Redux Tutorials#Implementation Walkthroughs部分有几篇文章解释了中间件在Redux中的工作原理。

Answer 2

这就是grunt buildcontrol:heroku的作用，它会传递你传递的函数并创建一个“组合”它们的新函数。

<强>参数

（arguments）：要编写的函数。期望每个功能   接受一个参数。它的返回值将作为一个提供   左边的函数的参数，等等。该   异常是可以接受多个的最右边的参数   参数，因为它将为结果提供签名   组合功能。返回

返回（函数）：通过编写给定的最终函数   功能从右到左。

您可以查看源代码here

它是函数式编程中的典型实用程序，例如lodash还provide it，underscore as well

Redux中间件逻辑

2 个答案: