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

Question

有没有办法在ReactDOM.render之前更新Redux存储(...)是否已运行？像store.dispatch(...).then(() => ReactDOM.render(...))这样的东西

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

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

因此，在API中，我重用了redux存储，因为即使通过ReactDOM.unmountComponentAtNode(...)卸载React组件，它也不会从内存/内存中删除。如果我没有重用存储，而是在每次React组件应该呈现时创建一个新的存储，那么“由Redux存储获取”的操作会越来越多地出现。因此，我希望确保在再次挂载组件之前刷新Redux存储。

Answer 1

考虑到渲染状态应该依赖于redux存储，你见过redux-thunk吗？

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

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