了解如何在redux-toolkit中使用预加载状态

mqkwyuun  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(183)

我试图保存一些东西在区域存储和rehydrate状态刷新。
它可以工作,但是我的分片文件中的initalState被覆盖了。

const reHydrateStore = () => {
    if (localStorage.getItem('culture') !== null) {
        return { login: { culture: JSON.parse(localStorage.getItem('culture')) } };
    }
};

export default reHydrateStore;

然后在configureStore中:

preloadedState: reHydrateStore(),

当我不使用reHydrateStore时,我的initalState对象看起来像这样:

const initialState = {
    isLoading: false,
    culture: '',
    error: null,
};

当我使用reHydrateStore时:

const initialState = {
    culture: 'en-US',
};

有没有办法配置preloadedState来替换给定的prop?
我知道我可以在reHydrateStore方法中设置所有的initalState属性,但这似乎是一种很糟糕的做法。

编辑:

我将逻辑移到切片中,以便能够访问initalState。但是@Rashomon有一个更好的方法imo,并且将尝试使用它。但是这里是我的第一个解决方案:

const reHydrateLoginSlice = () => {
    if (localStorage.getItem("culture")) {
        return {
            login: { ...initialState, culture: JSON.parse(localStorage.getItem("culture")) },
        };
    }
};
export { reHydrateLoginSlice };
rdrgkggo

rdrgkggo1#

也许你可以这样定义你的initialState,以避免重写其余的键:

const initialState = {
    isLoading: false,
    culture: '', // default value, will be overwrited in following line if defined in the storage
    ...(reHydrateStore() || {}), // if returns undefined, merge an empty object and use previous culture value
    error: null,
};

如果只需要对culture进行再水化,我将只对值而不是对象进行再水化,以使其更简单:

const initialCultureValue = ''

const initialState = {
    isLoading: false,
    culture: reHydrateCulture() || initialCultureValue,
    error: null,
};

相关问题