[英]How to transform a Redux state into Redux Persist using 'combineReducers'?
I try to transform my Redux state in Redux-Persist but I don't know how to write the code because I use combineReducers.我尝试在 Redux-Persist 中转换我的 Redux state 但我不知道如何编写代码,因为我使用 combineReducers。
This is how looks my store:这是我的商店的样子:
import { createStore, combineReducers } from 'redux'
import { usersReducer } from './users';
import { eventsReducer } from './events';
export const store = createStore(combineReducers({
users: usersReducer,
events: eventsReducer
}));
And this is how looks a store:这就是一家商店的样子:
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
}
}
Can somebody help me, please?有人可以帮我吗?
You can just make changes to your code in store.js
.您只需更改
store.js
中的代码即可。
@reduxjs/toolkit
package@reduxjs/toolkit
packagenpm install @reduxjs/toolkit
npm install @reduxjs/toolkit
yarn add @reduxjs/toolkit
yarn add @reduxjs/toolkit
redux-persist
packageredux-persist
packagenpm install redux-persist
npm install redux-persist
yarn add redux-persist
yarn add redux-persist
store.js
filestore.js
文件中进行的更改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]
}
})
})
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]
}
})
})
Here are the references:以下是参考资料:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.