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实例的默认标头：

// 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，然后坚持/ REHYDRATE。我甚至无法在action中找到自定义类型。

我查了一下，但无法找到任何自定义中间件的示例。

所以我的问题是，如何在我的自定义中间件旁边使用redux-persist？

Answer 1

作为第一个问题，您的商店配置过程是错误的。您不止一次致电applyMiddleware。根据Redux常见问题解答，calling applyMiddleware multiple times sets up multiple middleware chains, which won't work correctly。

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

如何使用redux-persist和自定义中间件

1 个答案: