Question

我刚开始学习React.js，现在我打算更深入地学习Redux。我更好理解的第一个任务是如何根据导航中的点击在不同页面上显示不同的标题。该操作发生在我的应用的导航组件中。标题应显示在标题/介绍组件中。我设法设置了所有内容但是现在我收到以下错误：未捕获的TypeError：dispatch不是函数（...）我认为错误必须在我的导航组件或我的Action中。谢谢你的帮助！

intro.js

 import React, { Component } from 'react'
 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'
 import {loadIntro} from '../actions/index'
 require('../../scss/Intro.scss');

class Intro extends Component {

render() {


        return (
            <div className="introWrapper">
                <ul>
                <h2>{this.props.activeTitle}</h2>
                </ul>
            </div>
        );
    }


};


function mapStateToProps(state) {
    return {
        //The different titles
        activeTitle: state.activeTitle
    };
}

Nav.js

import React, { Component } from 'react'
import { Link } from 'react-router';
import TestComponent from '../containers/test-component';
import {loadTravel} from '../actions/index'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
require('../../scss/nav.scss');

class Nav extends Component {

 render () {
    return (
    <div>

     <nav className="wrapperNavigation">

        <ul>
            <li onClick={() => this.props.loadTravel()}><Link to="/travel" activeClassName="active">Travel</Link></li>
            <li><Link to="/living" activeClassName="active">Living</Link></li>

        </ul>
     </nav> 
     </div>
    )
  }

}



function mapDispatchToProps(dispatch) {
  return bindActionCreators({ loadTravel:loadTravel}, dispatch);

  }

export default connect(mapDispatchToProps)(Nav);

减速器的有源intro.js

export default function (state = [], action) {
        if (action.type ==="LOAD_TRAVEL") {

            var newState = Object.assign({}, state, {title:action.title});
            return newState;
            }


return state;
}

操作/ index.js

export const loadTravel = () => {


    return {

        type: "LOAD_TRAVEL",
        title: "Schubiduu"
    }
};

减速器/ index.js

import {combineReducers} from 'redux';
import titleReducer from './reducer-active-intro.js';
/*


const allReducers = combineReducers({
    activeTitle: titleReducer
});

export default allReducers

Answer 1

export default connect(null, mapDispatchToProps)(Nav);应该是连接的第二个参数。

如果您没有要执行任何状态映射，则可以将null作为第一个参数传递：

-stylesheetfile <path>

React / Redux在不同页面上显示不同的标题

1 个答案: