如何将 redux-persist 与自定义中间件一起使用

Question

使用 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 实例的默认值 header：

// 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 与我的自定义中间件一起使用？

Answer 1

第一个问题，您的商店配置过程是错误的。您不止一次呼叫 applyMiddleware。根据 Redux FAQ，calling applyMiddleware multiple times sets up multiple middleware chains, which won't work correctly.

将其更改为applyMiddleware(axiosMiddleware, thunk)，然后看看会发生什么。

如何将 redux-persist 与自定义中间件一起使用

How to use redux-persist with custom middleware

reactjs

redux

redux-middleware

redux-persist