How do I redirect to another page in my react app after changing the redux store state?

Question

I have a react project where I am using redux to manage state. I have a reducer ( authReducer ) I am using to set a boolean value for ( isAuthenticated ) and a protected route component ( ProtectedRoute.js ) where I check the state of this value. If set to false, then I redirect the client to a login component ( Login.js ). If ( isAuthenticated ) is set to true, I should be able to browse all links. The routing itself is managed by a component ( Routes.js ).

authReducer.js

import * as actionTypes from '../actions/actionTypes'

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

ProtectedRoute.js

const ProtectedRoute = ({ ...props }) =>
    props.authReducer ? <Route {...props}/> : <Redirect to="/login"/>;

const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

export default connect(mapStateToProps)(ProtectedRoute);

Routes.js

class Routes extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <ProtectedRoute path="/" exact component={Dashboard} />
                    <ProtectedRoute path="/Dashboard" exact component={Dashboard} />
                    <ProtectedRoute path="/About" exact component={About} />
                </Switch>
            </Router>
        );
    }
}

Login.js

class Login extends Component {
    render() {
        return (
            <Container>
                <h1>Login</h1>
                <Button onClick={() => this.props.onLogin(this.props.authReducer)}>Login</Button>
                <Button>Logout</Button>
            </Container>


        );
    }
}
const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onLogin: () => dispatch({type: actionTypes.LOGIN})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

index.js

const rootReducer = combineReducers({
    authReducer: authReducer
});
const store = createStore(rootReducer)

ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>
          <App />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

I'm having an issue setting the isAuthenticated boolean value to true, and then browsing the protected routes. The routes I set up are still protected and I'm not 100% sure why. I'm new to react so any help is appreciated. Thanks in advance.

Answer 1

So I needed to set the redirect after I set the isAuthenticated boolean. I created a history.js file to export createBrowserHistory .

history.js

import { createBrowserHistory } from "history";
export default createBrowserHistory();

In my authReducer.js file I imported this history file. I then used the history.push() method to redirect to another page after setting isAuthenticated: true

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            history.push('/dashboard')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

This documentation helped me React Router - History