Использование 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 я не могу получить свой собственный тип - RECEIVE_LOGIN - из action.type, вместо этого я получаю persist / PERSIST, а затем persist / REHYDRATE. Я даже не могу найти свой собственный тип в action.
Я просмотрел его, но не смог найти ни одного примера с настраиваемым промежуточным программным обеспечением.
Итак, мой вопрос: как мне использовать redux-persist вместе с моим пользовательским промежуточным программным обеспечением?
@JoeyGough А, это всего лишь небольшой подарок для настройки Redux с инструментами Chrome Dev. Узнай больше об этом здесь





Во-первых, неправильный процесс настройки вашего магазина. Вы звоните applyMiddleware более одного раза. Согласно Redux FAQ, вызов applyMiddleware несколько раз устанавливает несколько цепочек промежуточного программного обеспечения, которые не будут работать правильно.
Измените его на applyMiddleware(axiosMiddleware, thunk) и посмотрите, что произойдет.
Было бы более понятно, если бы эта функция называлась applyMiddlewares.
Грамматически это нечеткое и может использоваться в любом случае - см. english.stackexchange.com/questions/257120/…
не могли бы вы объяснить
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()?