I am trying to integrate redux with react-routing. I found a situation like, i am accessing the same reducer by two component. i am updating the sate from one component, state is getting updated in store. while routing to the another component,again reducer is getting called automatically and intialized the state with default value. Here what is happening as per my understanding,reducer is getting called from store and passing the state value as null, so it is taking the default value (feature of ES6) and in same way action.type would null only.
So, My question is why reducer is getting called for every routing even though there is no any user actioned performed. even though if it is calling the reducer, why store is passing null value to the state argument of reducer instead of the state updated by component before routing.
Reducer:
export const userReducer=function(state={name:"rohit",id:123},action){ console.log("user reducer called",state); switch(action.type){ case "NEW_USER_REG": console.log("user added"); state=Object.assign({},action.payload); break; case "DELETE_USER": consol.log("user deleted"); break; } return state; } Component 1(reading and writing from store state):
import React from 'react'; import {Navbar} from '../component/navbar'; import {connect} from 'react-redux' class Main extends React.Component{ render(){ return( <div> <h1>This is main comp.. below is state got from store</h1> <input type="text" ref="name"/> <button onClick={()=>this.props.register("rajesh")}>update state</button> <hr></hr> {this.props.user.name} </div>); } } const stateToprops=(state)=>{ return { user:state.userReducer } } const dispatchToProps=(dispatch)=>{ return{ register:(name)=>{ console.log("fun called ",name); dispatch({ type:"NEW_USER_REG", payload:{name:name,id:1} }) } } } export default connect(stateToprops,dispatchToProps)(Main); Component 2(reading from store state):
import React from 'react'; import {connect} from 'react-redux'; export class Second extends React.Component{ render(){ return( <div> <h1>Hello, This is active component...</h1> <hr></hr> {this.props.user.name} </div> ) } } const stateToProps=(state)=>{ return{ user:state.userReducer } } const dispatchToProps=(dispatch)=>{ return{ adduser:(expense)=>{ dispatch({type:"NEW_USER_REG",payload:expense}) } } } export default connect(stateToProps,dispatchToProps)(Second); Router Component :
import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import {Navbar} from '../component/navbar'; import Second from '../component/second'; import Main from '../component/main'; export class App extends React.Component{ render(){ return( <div> <div style={{height:80,backgroundColor:'#e8e3e4'}}></div> <Navbar/> <div className="text-align: center; margin: auto; width: 60%; padding: 10px;"> <div style={{height:5}}></div> <div className="container-fluid"> <div className="row"> <div className="col-md-2"> </div> <div className="col-md-8"style={{height:'auto',backgroundColor:'#e8e3e4'}}> <Router> <Switch> <Route exact path='/' component={Main} /> <Route path='/contact' component={Second}/> </Switch> </Router> </div> <div className="col-md-2"></div> </div> </div> </div> </div> ); } } anchor component using not
import React from 'react'; import {Second} from '../component/second'; export class Navbar extends React.Component{ render(){ let styles={width:10}; return( <div > <nav className="navbar navbar-inverse" > <div className="container-fluid"> <div className="navbar-header"> <a className="navbar-brand" href="/">My Learning Project</a> </div> <ul className="nav navbar-nav"> <li className="active"><a href="/">Home</a></li> <li className="dropdown"><a className="dropdown-toggle" data-toggle="dropdown" href="#">Service<span className="caret"></span></a> <ul className="dropdown-menu"> <li><a href="/register">Register</a></li> <li><a href="#">Get-Profile</a></li> <li><a href="#">Update</a></li> </ul> </li> <li><a href="/contact">Contact Us</a></li> <li><a href="#">About</a></li> </ul> </div> </nav> </div> ); } } index.js
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import {App} from './app' import {store} from './store.js' import {Provider} from 'react-redux' ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('content') ); 
