redirect inside a redux action with react-router-dom

Question

I am new to react. I have a component called Register.js there I call a redux action's method register. So inside that I want to redirect user to path /dashboard after the dispatch. This is my action inside redux

const { REGISTER_USER } = require('./types')
export const register = (values) => async dispatch => {

    try {
        // register part goes here ...

        dispatch({
            type: REGISTER_USER,
            payload: values
        })

    } catch (error) {
        console.log(error)
    }
}

How do I achive this in react?

score 0 · Answer 1 · answered May 16 '20 at 04:06

I personally would use react router and the history functionality to push to a new page after the action has dispatched and resolved (e.g. the user has registered)

React router redirect after action redux

Be aware newer versions of react router behave differently

How to push to History in React Router v4?

Another option would be having "register" as a modal, and once submitted you just hide the modal from view and refresh the dashboard component with the new props (so it'd go and fetch data for the newly authenticated user)

You wouldn't want to redirect in the action or redux reducer/state files, it'd be in your react component logic.

redirect inside a redux action with react-router-dom

1 Answers1