私は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;
}
中途半端
問題は promise ミドルウェアであることが判明しました。
私が使用していたボイラープレートは、次のようなカスタム ミドルウェアを使用していました。
/*
* 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