Reducer 为每个路由被调用三次而不执行任何操作

Question

我正在尝试将 redux 与 react-routing 集成。我发现了这样的情况， 我正在通过两个组件访问同一个减速器。我正在从一个组件更新状态，状态正在商店中更新。在路由到另一个组件时，reducer 再次被自动调用并使用默认值初始化状态。 根据我的理解，这里发生了什么，reducer 从 store 中被调用并将状态值传递为 null，因此它采用默认值（ES6 的特性）并且以同样的方式 action.type 只会为 null。

所以，我的问题是，即使没有执行任何用户操作，为什么每次路由都会调用 reducer。即使它调用reducer，为什么store将null值传递给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;
}

组件1（从存储状态读取和写入）：

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);

组件 2（从存储状态读取）：

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);

路由器组件：

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>

            );
        }
}

锚定组件不使用

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')
);

Answer 1

能否请您发布一些代码的 sn-ps，例如被调用两次的减速器和第二个组件，特别是您正在调度操作的部分。这样我们或许可以为您提供帮助。

---

解决方案

OP 使用锚标签 <a> 导航到不同的 url，这些 url 使页面重新加载并重新创建 redux 存储。切换到<Link> 解决了这个问题。