React and easy-peasy - 如何重置完整状态？答案

【问题标题】：React and easy-peasy - How to reset full state?React and easy-peasy - 如何重置完整状态？
【发布时间】：2022-01-15 08:59:30
【问题描述】：

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

我试过store.reconfigure(newStateModel)，但我不太明白它在保持旧状态时应该如何工作（看起来它合并了新旧状态）。所以我在重新配置之前尝试了await store.persist.clear()，但是我又得到了重新渲染错误，有些东西是未定义的。

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

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>
    )
}

我迷路了？？？
任何帮助将不胜感激????

【问题讨论】：

标签： reactjs state reset easy-peasy

【解决方案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)

【讨论】：