4

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カスタム ミドルウェアと一緒に使用するにはどうすればよいですか?

4

1 に答える 1