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

Question

So far, I have been using React with React-Router and when passing data between URL s, I have been passing the state as

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

This is documented here

and in the Component, I would use it as

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

However, I learned that managing state in Redux is a better idea and it helps test the store separately from how the views look. and I liked that idea because I care about the clean-testable code.

I started refactoring code and for many parts where I need data from the database, I was able to migrate the code using thunk pattern. However, with this use case where the state is sent as part of history.push , I don't know how to put this state into the Redux Store.

Question
How do I migrate the state in this.props.history.push(Routes.transactionEdit, this.state.transaction); (during push) to the Redux store, so that it can be managed outside of React Component?

Thanks

Answer 1

You'll need to setup a specific action that is specifically meant for taking a component's state and pushes it to Redux's store. Of course you'll need to have your reducer respond appropriately to that action. If youre new to Redux, this might be opening a big can of worms.