如何将在React-Router中传递的状态迁移到Redux Store？

Question

到目前为止，我一直在使用React和React-Router一起使用React ，并且在URL之间传递数据时，我一直在传递状态为

this.props.history.push(Routes.transactionEdit, this.state.transaction);  

在这里记录

在组件中，我将其用作

constructor(props) {
    super(props);
    this.state = {
        userId: props.history.location.state.userId,
        transactionId: props.history.location.state.id,
        createdAt: props.history.location.state.createdAt,
        name: props.history.location.state.name,
        amount: props.history.location.state.amount,
    }
}

但是，我了解到在Redux中管理状态是一个更好的主意，它有助于与视图外观分开测试商店。 我喜欢这个主意，因为我关心可清洁测试的代码。

我开始重构代码，对于需要从数据库获取数据的许多部分，我能够使用thunk模式迁移代码。 但是，在这种用例中，状态是作为history.push一部分发送的，我不知道如何将该状态放入Redux Store。

题
如何在this.props.history.push(Routes.transactionEdit, this.state.transaction);迁移状态this.props.history.push(Routes.transactionEdit, this.state.transaction); （在推送期间）到Redux存储，以便可以在React Component之外对其进行管理？

谢谢

Answer 1

您需要设置一个特定的action ，该操作专门用于获取组件的状态并将其推送到Redux的存储。 当然，您需要使减速器对该动作做出适当的响应。 如果您是Redux的新手，这可能会打开一大堆蠕虫。