Как устранить ошибку Uncaught TypeError: _this.props.change is not a function в проекте React-Redux?

Question

[pomaz_andrew]

Всем доброго времени суток! Делаю небольшой проект на React+Redux. Привожу код компонента.

class Container extends Component {
  constructor(props) {
    super(props);
  }
  handleChange = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) => {
    this.props.change(suggestionValue);
  }
  render() {
    return (
       <Provider store={store}>
         <form >
           <IntegrationAutosuggest label="Станция отправления" onSelected={this.handleChange} />
         </form>
       </Provider>
     );
  }
}
const mapStateToProps = (state) => {
  return {
    out: state.out,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    change: (dispatch) => dispatch(changeOutStation(dispatch))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Container);
export const store = createStore(combineReducers(reducers));
ReactDOM.render(<Container />, document.getElementById("params"));
export { Container };

Код action

export const changeOutStation = (station) => ({
  type: 'CHANGE_OUT_STATION', station
});

Выкидывает ошибку при заполнении компонента IntegrationAutosuggest
Uncaught TypeError: _this.props.change is not a function.
В реакте опыта мало. Что я делаю неправильно ?

Answer 1

[NepeinAndrey]

Проблема в том, что на вход в функцию ReactDOM.render вы даёте сам компонент Container, в который не передаются никакие параметры, в частности change. Параметр change появляется только после выполнения connect для этого компонента, следовательно и в ReactDOM.render нужно передавать то, что возвращает вышеупомянутый connect.

Comments

[pomaz_andrew]

Спасибо, кажется я понял проблему. Container надо погрузить в компонент-обертку, которая и будет его рендерить. Тогда эта проблема должна уйти, но это предположение пока.

Answer 2

[Антон Спирин]

Как вариант решения, перенести Provider выше по древу:

const ConnectedContainer =  connect(mapStateToProps, mapDispatchToProps)(Container);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedContainer />
  </Provider>,
  document.getElementById("params"),
);

Comments

[pomaz_andrew]

Спасибо Антон, убрал проблему, закинув Provider уровнем вверх. Документацию надо перелопатить однозначно, не факт, что там будут лучшие практики. Но базисом будем идеальным.

[Kirill Borun]

Не могли бы вы мне помочь с похожей проблемой?

[pomaz_andrew]

Пока никак, отошел от дел ...