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

Question

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

我试过 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>
    )
}

我在这里迷路了
任何帮助将不胜感激

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)

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

React and easy-peasy - How to reset full state?

state

reset

reactjs

easy-peasy