Redux not working with React-router

Question

I'm using the following:

react v16.2.0, react-redux v5.0.7, react-router-dom v4.2.2, redux v3.7.2

What I am trying to achieve is to update some props from the Auth component, and when the user navigates to /user (Which loads the Userpage component), the modified props should be displayed. Here is a simplified version of my code:

In App.js:

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import Store from './components/Store';
import Home from './components/Home';
import Auth from './components/auth';
import Userpage from './components/Userpage';
import { BrowserRouter as Router, Route } from 'react-router-dom';

class App extends Component {

  render() {
    return (  
      <Provider store={Store}>    
        <Router>
          <div>
            <Route exact path="/" component={Home}/>
            <Route path="/login" component={Auth}/>
            <Route path="/user" component={Userpage}/>
          </div>
        </Router>
      </Provider>
    );
  }
}

export default App;

In Store.js:

import { createStore } from 'redux';

const reducer = (state,action) => {
    if(action.type == 'TEST'){
        return Object.assign({},state,{test:action.payload.test});
    } else    
        return state;
}

export default createStore(reducer,{
    test:'DOES NOT WORK',
})

In Auth.js :

import React from 'react';
import { connect } from 'react-redux';
import Userpage from './Userpage';


class Auth extends React.Component {

    componentWillMount() {
        this.props.update('TEST',{test:'WORKS'});
    }

    render() {
        return(
            <div>
                <Userpage/>
            </div>
        );
    }
}

export default connect(
    (store) => {
        return store;
    },
    (dispatch) => {
        return {
            update:(dispatchType, dispatchPayload) => {
                dispatch({type:dispatchType,payload:dispatchPayload});
            }
        }
    }
)(Auth);

In Userpage.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Userpage extends Component{
    componentDidMount(){
        console.log(this.props.test);
    }

    render(){
            return null;
    }
}

export default connect(
    (store) => {
        return store;
    }
)(Userpage);

Now, when I navigate to /login, the store is updated and test is set to "WORKS". But if I navigate to /userpage, console.log(this.props.test) prints "DOES NOT WORK", instead of the updated prop.

Just to test, I included Userpage in the render function of Auth and it console logs "WORKS" correctly.

So why is the redux store apparently being reset to default values on navigation to another page using react-router? How can I fix this?

AZG · Accepted Answer · 2018-03-29 15:06:56Z

1

Found the solution. Apparently the whole application re-renders when you manually navigate (by typing in the URL in the browser), hence resetting the redux store.

Using Link as mentioned in react-router docs or redirecting using this.props.history.push('/user') works without any issues.

answered Mar 29, 2018 at 15:06

AZG

1072 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux not working with React-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related