1

我是 react-redux 的新手，我正在尝试组合一个小的 Web 应用程序，同时我会学习最佳实践并了解框架。我的问题是生态系统是如此多样化，以至于我并不总是确定为什么事情看起来不同。

我正在查看下面的样板， https://github.com/choonkending/react-webpack-node/blob/master/app/containers/LoginOrRegister.jsx

我的代码在大多数情况下是相同的，但是虽然看起来调用了动作，但它没有到达减速器，或者调用了动作但实际上没有调度。

我无法让它工作，我只是不知道我在那里缺少什么，这让我觉得很愚蠢。

我的 configureStore 看起来像下面这样，我看不出我应该做些什么不同

export default function configureStore(initialState, history) {

  const reactRouterReduxMiddleware = routerMiddleware(history);

  let middleware = [
    thunk,
    promiseMiddleware,
    reactRouterReduxMiddleware
  ];

  const store = applyMiddleware(...middleware)(createStore)(rootReducer, initialState);

  return store;
}

半答案

问题原来是承诺中间件。

我以前使用的样板是使用自定义中间件，如下所示

/*
* Redux middleware to handle promises
* As seen in: https://github.com/caljrimmer/isomorphic-redux-app
* https://github.com/choonkending/react-webpack-node/blob/master/app/api/promiseMiddleware.js

*/
export default function promiseMiddleware() {
  return next => action => {
    const { promise, type, ...rest } = action;

    if (!promise) return next(action);

    const SUCCESS = type + '_SUCCESS';
    const REQUEST = type + '_REQUEST';
    const FAILURE = type + '_FAILURE';
    next({ ...rest, type: REQUEST });
    return promise
      .then(req => {
        next({ ...rest, req, type: SUCCESS });
        return true;
      })
      .catch(error => {
        next({ ...rest, error, type: FAILURE });
        return false;
      });
   };
}

在我的代码中，我选择导入一个 npm 包，没有特别的原因，我只是想使用一个积极维护的存储库。 https://www.npmjs.com/package/redux-promise-middleware。

一旦我隔离了问题，我就切换到这个，一切正常。https://www.npmjs.com/package/redux-promise。

@dannyjoile 说得对，configureStore 出了点问题。当我导入 redux-promise-middleware 时，这些操作不会达到 reduce。我不知道为什么，老实说我还不太了解 redux 中间件。

我在github上得到了所有东西，如果有人想看看。 https://github.com/ap-o/react-redux-material-passport

4

0 回答 0