在 ReactDOM.render(...) 之前更新 redux-store答案

【问题标题】：Update redux-store before ReactDOM.render(...)在 ReactDOM.render(...) 之前更新 redux-store
【发布时间】：2020-05-22 10:37:29
【问题描述】：

有没有办法在 ReactDOM.render(...) 运行之前更新 Redux 存储？类似store.dispatch(...).then(() => ReactDOM.render(...))

或者只是替换商店的整个“状态”的方法？

我正在使用 React 组件创建一个 API，该 API 在另一个应用程序中与另一个框架 Dojo 一起使用。因此，我们在组件应该出现/消失时使用 ReactDOM.render(...) 和 ReactDOM.unmountCompoentAtNode(...)。

所以在 API 中，我重用了 redux 存储，因为即使通过 ReactDOM.unmountComponentAtNode(...) 卸载了 React 组件，它也不会从内存/RAM 中删除。如果我不重用 store，而是在每次 React 组件渲染时创建一个新的，那么“由 Redux store 获取”的操作会越来越多。因此，我想确保在再次挂载组件之前能够刷新 Redux 存储。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

鉴于渲染状态应该依赖于redux store，你见过redux-thunk吗？

一种方法是在访问 API 端点时显示一个微调器。从 API 响应设置状态后，继续显示真实组件。

【讨论】：

【解决方案2】：

您以错误的方式接近解决方案。对于这个用例，我们在组件中有life cycle methods

ReactDOM.render(<App />, document.getElementById('root'))

在这段代码中，我正在渲染App 组件，为了解决您的问题，我将使用App 的componentDidMount 生命周期方法，并从那里调度API 调用。

class App {
    componentDidMount() {
        dispatch(MY_ACTION)
    }
    render() {
        return (<h1>dummy</h1>)
    }
}

对于基于hooks的功能组件，需要使用useEfect

const App = () => {
    useEffect(() => {
        dispatch(MY_ACTION)
    }, [])

    return (<h1>dummy</h1>)
}

【讨论】：

我更新了我的问题，以便您可以看到更多我的问题。我现在知道这是否能确保 redux 商店更新？直到 componentDidMount() 触发的时间呢？我认为旧的 Redux 状态仍然存在，因为我正在重用 Redux 存储。
好吧，在这种情况下，您可以从constructor 发送一个操作来清除您的商店。