如何使用“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 add @reduxjs/toolkit

2. 安装redux-persist包

• 使用npm：npm install redux-persist
• 使用纱线：yarn add redux-persist

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

1. 保留所有reducer

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. 只坚持某些reducer

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