Action doesn't reach reducer, react-redux this.props dispatch

时间:2016-04-04 17:48:35

标签: reactjs redux react-redux

I am new to react-redux and I am trying to put together a little web app, while i pick up best practises and understand the framework. My problem is that the ecosystem is so diverse that i am not always sure why things look different.

I am looking at the boilerplate bellow, https://github.com/choonkending/react-webpack-node/blob/master/app/containers/LoginOrRegister.jsx

My code is identical for the most part but while it appears that the action is called, it doesn't reach the reducer, or the action is called but not actually dispatched.

I can't get it to work and i just can't figure out what am i missing there, and it makes me feel stupid.

My configureStore looks like bellow, i can't see what i should do differently

export default function configureStore(initialState, history) {

  const reactRouterReduxMiddleware = routerMiddleware(history);

  let middleware = [
    thunk,
    promiseMiddleware,
    reactRouterReduxMiddleware
  ];

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

  return store;
}

Half-answer

The issue turned out to be the promise middleware.

The boilerplate i used to was using a custom middleware, like the one bellow

/*
* 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;
      });
   };
}

In my code, i chose to import an npm package, for no particular reason, i just thought to go with an actively maintained repository. https://www.npmjs.com/package/redux-promise-middleware.

Once i isolated the problem, i switched to this one, and everything worked fine. https://www.npmjs.com/package/redux-promise.

@dannyjoile had it right, something was wrong in the configureStore. The actions wouldn't reach the reduces, when i was importing the redux-promise-middleware. I'm not sure why, to be honest i don't quite understand redux middleware yet.

I got everything on github, if anyone wants to have a look. https://github.com/ap-o/react-redux-material-passport

0 个答案:

没有答案