如何使用“combineReducers”将 Redux 状态转换为 Redux Persist？

Question

我尝试在 Redux-Persist 中转换我的 Redux 状态，但我不知道如何编写代码，因为我使用 mergeReducers。

这就是我的商店的样子：

import { createStore, combineReducers } from 'redux'
import { usersReducer } from './users';
import { eventsReducer } from './events';

export const store = createStore(combineReducers({
    users: usersReducer,
    events: eventsReducer
}));

这就是商店的样子：

const initialState = {
    loggedIn: false,
    thisUser: []
}

export function usersReducer(state = initialState, action) {
    switch (action.type) {
        case 'users/loggedIn':
            return { ...state, loggedIn: action.payload }
        case 'users/addUser':
            return { ...state, thisUser: action.payload[0] }
        case 'users/setActivated':
            return { ...state, thisUser: { ...state.thisUser, activated: action.payload } }
        case 'clearAll':
            return {
                thisUser: []
            }
        default:
            return state
    }
}

有人可以帮助我吗？

Answer 1

您只需更改 store.js 中的代码即可。

先决条件

1. 安装@reduxjs/toolkit软件包

• 使用npm
• ：npm install @reduxjs/toolkit使用yarn：< code>yarn add @reduxjs/toolkit

2. 安装 redux-persist 包

• 使用 npm
• ： npm install redux-persist using yarn: yarn add redux-persist

在 store.js 文件中进行的更改

1. 保留所有减速器

import { combineReducers } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import { usersReducer } from './users';
import { eventsReducer } from './events';
import {
  FLUSH, PAUSE,
  PERSIST, persistReducer, PURGE,
  REGISTER, REHYDRATE
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// combine all reducers
const reducers = combineReducers({
  users: usersReducer,
  events: eventsReducer
})

export const store = configureStore({
  reducer: persistReducer(
    {
      key: 'root',
      storage
    },
    reducers
  ),
  middleware: getDefaultMiddleware => getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
    }
  })
})

3. 仅保留某些减速器

import { combineReducers } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import { usersReducer } from './users';
import { eventsReducer } from './events';
import {
  FLUSH, PAUSE,
  PERSIST, persistReducer, PURGE,
  REGISTER, REHYDRATE
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

// combine all reducers
const reducers = combineReducers({
  users: persistReducer(
    {
      key: 'users',
      storage
    },
    usersReducer
  ),
  events: eventsReducer
})

export const store = configureStore({
  reducer: reducers,
  middleware: getDefaultMiddleware => getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
    }
  })
})

这里是参考文献：

• redux-persist 包 npm
• 使用 redux 工具包配置 redux-persist