React 和 easy-peasy - 如何重置完整状态？

Question

我找不到一种方法将完整状态重置为新状态。一旦我尝试一种或另一种方法，有时它似乎可以工作（具有较小的新状态），但大多数时候我的组件会重新渲染（由于状态更改，我假设尚未重新水化）并且我收到错误有些东西没有定义。

我已经尝试过

store.reconfigure(newStateModel)

，但我不太明白当它保持旧状态时它应该如何工作（看起来它合并了新旧状态）。所以我在重新配置之前尝试了

await store.persist.clear()

，但我再次收到重新渲染错误，有些内容未定义。

我还在 GitHub 上找到了 this thread 并尝试了两种方法：

setState: action((state, payload) => payload),

// and

reset: action((state, payload) => ({
  ...initialState,
}),

仍然是完全相同的问题（重新渲染时未定义某些内容）

正在考虑以某种方式在主

App

组件上显示“正在加载...”视图，但我在那里不使用任何状态（仅

store

本身），所以它甚至不重新渲染。目前我的

App

是：

const WaitForStateRehydration = ({children}) => {
    return useStoreRehydrated() ? children : <Loader/>
}

export default ({store}) => {
    return (
        <StoreProvider store={store}>
            <WaitForStateRehydration>
                <FsContextProvider>
                    <Panel />
                </FsContextProvider>
            </WaitForStateRehydration>
        </StoreProvider>
    )
}

我的

FsContextProvider

是一个加载器（带有上下文），它在一些数据可用后加载：

const FsContextProvider = ({children}) => {
    // ...

    return (
        <LoaderWrapper waitToLoad={someData}>
            <FsContext.Provider value={someData}>
                {children}
            </FsContext.Provider>
        </LoaderWrapper>
    )
}

我在这里迷失了方向😟
任何帮助将不胜感激🙏

Answer 1

不确定这是否是正确的方法，但它似乎对我有用。
我向我的商店模型添加了一个

loading

参数和一个操作：

    loading: boolean
    setLoading: Action<StoreState, boolean>

更改了我的

reset

操作以重置除

loading

参数之外的所有内容。
然后在我的

<Panel />

中添加了一张支票：

const Panel = () => {
    const loading = useStoreState(state => state.loading)

    return (
        loading
            ? <Loader/>
            : (
                <>
                    // Other panel components
                </>
            )
    )
}

最后，在我需要重置状态的地方，我这样做了：

store.dispatch.setLoading(true)
store.dispatch.reset(newState)
store.dispatch.setLoading(false)

Answer 2

我在 localStorage 中有持久存储，我需要清除它。

await store.persist.clear()

对我不起作用。

我为解决这个问题所做的事情非常糟糕。

创建商店时：

const Store = createStore(persist(StoreModel, { storage: 'localStorage' }), {
  name: 'some_key'
});

这在 localStorage 中创建了一个名为：

'[some_key][0]'

的密钥

然后我在需要清空它的代码中执行了此操作：

localStorage.removeItem('[some_key][0]');

它并不花哨，但它可以完成工作。

Answer 3

禁用沉浸器并更换完整状态。

https://easy-peasy.dev/docs/api/action.html#arguments

reset: action((state, payload) => ({
  ...initialState,
},{immer: false}),