Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何确定LS(脱水)的状态与combinereducer';要在预加载状态下应用的形状?_Reactjs_React Redux_Reducers_Redux Toolkit - Fatal编程技术网

Reactjs 如何确定LS(脱水)的状态与combinereducer';要在预加载状态下应用的形状?

Reactjs 如何确定LS(脱水)的状态与combinereducer';要在预加载状态下应用的形状?,reactjs,react-redux,reducers,redux-toolkit,Reactjs,React Redux,Reducers,Redux Toolkit,在Redux toolkit中,预加载状态(从本地存储中脱水)应为联合收割机减速器的形状如果形状不正确或在连续更新中添加了新的减速器,应用程序可能会崩溃,如何比较联合收割机减速器形状和从本地存储中脱水状态的形状 import { combineReducers, configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; import { useDispatch } from 'react-redux'; import { CO

在Redux toolkit中,预加载状态(从本地存储中脱水)应为联合收割机减速器的形状如果形状不正确或在连续更新中添加了新的减速器,应用程序可能会崩溃,如何比较联合收割机减速器形状和从本地存储中脱水状态的形状

import { combineReducers, configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import { CONFIG } from '../config/config';
import * as reducers from './models';

const reHydrateStore = () => {
    const data = localStorage.getItem(CONFIG.REDUX_APP_STATE);
    if (data) {
        return JSON.parse(data);
    }
    return undefined;
};

export const store = configureStore({
    reducer: combineReducers({ ...reducers }),
    devTools: CONFIG.ENV === 'development' ? true : false,
    middleware: getDefaultMiddleware(),
    preloadedState: reHydrateStore(), // **** heads down here *** => may crash if store shape not matches combinre reducer's sstate
});

// persisting store
store.subscribe(
    lodash.debounce(() => {
        localStorage.setItem(CONFIG.REDUX_APP_STATE, JSON.stringify(store.getState()));
    }, 1000),
);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = (): ReturnType<typeof useDispatch> => useDispatch<AppDispatch>();

从'@reduxjs/toolkit'导入{combinereducer,configureStore,getDefaultMiddleware};
从'react redux'导入{useDispatch};
从“../CONFIG/CONFIG”导入{CONFIG};
从“./models”导入*作为减速器;
常量再水化存储=()=>{
const data=localStorage.getItem(CONFIG.REDUX\u APP\u状态);
如果(数据){
返回JSON.parse(数据);
}
返回未定义;
};
导出常量存储=配置存储({
减速器:组合减速器({…减速器}),
devTools:CONFIG.ENV==“开发”?true:false,
中间件:getDefaultMiddleware(),
预加载状态:reHydrateStore(),//****如果存储形状与Combinere reducer的状态不匹配,此处的头***=>可能会崩溃
});
//持久存储
store.subscribe(
lodash.debounce(()=>{
setItem(CONFIG.REDUX_APP_STATE,JSON.stringify(store.getState());
}, 1000),
);
导出类型RootState=ReturnType;
导出类型AppDispatch=typeof store.dispatch;
export const useAppDispatch=():ReturnType=>useAppDispatch();

这并不是特定于redux工具包的。您正在查找关于for redux persist的文档

本质上,作为开发人员,您必须跟踪您所在州的哪些版本彼此兼容。该版本将与状态一起保存,您可以引入迁移功能从一个版本迁移到下一个版本