redux-persist 5.10.0 を使用。
公式ドキュメントを使用して構成した後、完全に機能しています。
// configureStore.js
// all imports here
const persistConfig = {
key: 'root',
storage,
whitelist: ['auth']
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
export default function configureStore() {
const store = createStore(
persistedReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
applyMiddleware(axiosMiddleware),
applyMiddleware(thunk)
);
const persistor = persistStore(store);
return { store, persistor };
}
と:
// index.js
// All imports here
const { store, persistor } = configureStore();
ReactDOM.render(
<Provider store={ store }>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root')
);
configureStore.js ファイルからわかるように、axios 用のカスタム ミドルウェアがあります。認証にJWTを使用しています。RECEIVE_LOGIN
このミドルウェアは、返されたトークンを axios インスタンスのデフォルト ヘッダーに割り当てることができるように、という名前のアクション定数をチェックします。
// axiosConfig.js
// imports here
export const axiosMiddleware = ({ dispatch, getState }) => next => action => {
if (action.type === 'RECEIVE_LOGIN') {
axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${action.data.token}`;
}
return next(action);
}
しかし、redux-persist のため、action.type からカスタム タイプ - RECEIVE_LOGIN - を取得できません。代わりに persist/PERSIST を取得してから persist/REHYDRATE を取得しています。でカスタム タイプを見つけることさえできませんaction
。
調べてみましたが、カスタムミドルウェアの例は見つかりませんでした。
私の質問は、redux-persist
カスタム ミドルウェアと一緒に使用するにはどうすればよいですか?