javascript - 连接 redux 到 react 和分派(dispatch)操作时遇到问题

Question

我是 redux 新手，所以我可能会在这里遗漏一些东西......

redux/reducers/schools.js:

export const SET_SELECTED = 'schools/SET_SELECTED';

const initialState = {
  selected: {},
  schools: []
};

export default function schools(state = initialState, action) {
  switch (action.type) {
    case SET_SELECTED:
      return {
        ...state,
        selected: action.payload
      };
    default:
      return state;
  }
}

export function setSelected(school) {
  return {
    type: SET_SELECTED,
    payload: school
  };
}

容器/Search.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setSelected } from '../redux/reducers/schools';
import SchoolCard from '../components/SchoolCard';

class Search extends Component {
  setSelectedSchool(school) {
    this.props.dispatch(setSelected(school)); // Error here
  }

  renderShools(schools) {
    return schools.map(school => {
      return (
        <div className="column is-8 is-offset-2" key={school.emis}>
          <SchoolCard school={school} setSelected={this.setSelectedSchool} />
        </div>
      );
    });
  }

  render() {
    return (
      <div className="container">
        <div className="columns">{this.renderShools(this.props.schools)}</div>
      </div>
    );
  }
}

export default connect(state => ({
  schools: state.schools.schools
}))(Search);

当 Search.js 中的 setSelectedSchool() 运行时，出现以下错误:

Uncaught TypeError: Cannot read property 'dispatch' of undefined...

我做错了什么/我错过了什么？

Answer 1

下面的代码展示了如何映射到 props 然后调用调度的示例:

import { addItem } from  './actions/items';

class App extends Component {

  render() {
    return (
      <div className="App">
       // some more tags
      </div>
    );
  }
};

const mapStateToProps = (state) => {
  return {
    items: state.items
  };
};

const mapDispatchToProps = dispatch => {
  return {
    addItem: () => {
      dispatch(addItem())
    }
  };
};

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

如果你不执行mapDispatchToProps，那么 this.props.dispatch 将是未定义的。