Как использовать redux-persist с настраиваемым промежуточным ПО

Использование 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 вместе с моим пользовательским промежуточным программным обеспечением?

не могли бы вы объяснить window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()?

Joey Gough 19.08.2018 02:45

@JoeyGough А, это всего лишь небольшой подарок для настройки Redux с инструментами Chrome Dev. Узнай больше об этом здесь

Nick Rameau 20.08.2018 15:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
2
2 697
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, неправильный процесс настройки вашего магазина. Вы звоните applyMiddleware более одного раза. Согласно Redux FAQ, вызов applyMiddleware несколько раз устанавливает несколько цепочек промежуточного программного обеспечения, которые не будут работать правильно.

Измените его на applyMiddleware(axiosMiddleware, thunk) и посмотрите, что произойдет.

Было бы более понятно, если бы эта функция называлась applyMiddlewares.

Nick Rameau 15.06.2018 13:32

Грамматически это нечеткое и может использоваться в любом случае - см. english.stackexchange.com/questions/257120/…

markerikson 17.06.2018 02:26

Другие вопросы по теме