Возникли проблемы с подключением редуктора к реагирующим и диспетчерским действиям

Question

Я новичок в редуксе, так что я могу что-то здесь упустить ...

Redux / редукторы / 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 запускается, я получаю следующую ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'dispatch' из неопределенного ...

Что я делаю не так / что мне не хватает?

Answer 1

export default connect(state => ({
  schools: state.schools.schools
}),
(dispatch)=>{return {setSelected:(data)=>(dispatch)({type:"SET_SELECTED",payload:data})}}
)(Search);

Вы можете дать 2 объекта для подключения

1. mapStateToProps {
      schools: state.schools.schools
    }
2(dispatch)=>{return {setSelected:(data)=>(dispatch)({type:"SET_SELECTED",payload:data})}

Вы потребовали отправку (2) также для отправки функции Поэтому измените последнюю строку (где вы используете подключение) на

export default connect(state => ({
      schools: state.schools.schools
    }),
    (dispatch)=>{return {setSelected:(data)=>(dispatch)({type:"SET_SELECTED",payload:data})}}
    )(Search);

и вызов функции на

 setSelectedSchool(school) {
    this.props.setSelected(school); // Error here
  }

Answer 2

Вам нужно немного изменить свой код

контейнеры / Search.js

import  React, { Component } from 'react';
import { connect } from 'react-redux';
import * as schoolActions from '../actions/schoolActions; 
import SchoolCard from '../components/SchoolCard';

class Search extends Component {
  setSelectedSchool=(school)=> {
    this.props.setSelectedschool(school)
  }

  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.schoolReducer.schools,

}),
{ ...schoolActions }
)(Search);

Создание действий / schoolActions.js

export function setSelectedschool(school){
    return (dispatch)=>{
         dispatch({'SET_SELECTED',school})
    }
}

создать редукторы / schoolReducer.js

const initialState={
   school:[] //assuming it's an array
}
const schoolReducer =(state=initialState,action)=>{
   switch(action.type){
      case 'SET_SELECTED':{
          return {
              ...state,
              school:action.school
          }
      }
   }

} 

Answer 3

Код ниже представляет пример того, как сопоставить с реквизитами, а затем вызвать диспетчеризацию:

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 будет неопределенным.