时间戳

首页 > 解决方案 > 在连接 redux 以响应和调度操作时遇到问题

javascript - 在连接 redux 以响应和调度操作时遇到问题

问题描述

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

运行时setSelectedSchool()出现Search.js以下错误：

未捕获的类型错误：无法读取未定义的属性“调度”...

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

标签： javascriptreactjsredux

解决方案

下面的代码代表了一个如何映射到道具然后调用 dispatch 的示例：

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 将是未定义的。

推荐阅读