Простой Redux-React пытается обновить состояние с помощью this.props.dispatch

Question

Когда я нажимаю на флажок, this.props.dispatch({type: "addPreferredChecked"}); вызывает эту ошибку:

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

Я был бы очень признателен за некоторую помощь, также просто чтобы вы знали, что этот проект выполняется в Typescript с React и Redux.

Как Redux Newby, я просто пытаюсь просто поменять свойство флажка HTML-флажок с true на false или наоборот, когда флажок установлен. Мой компонент представления имеет логику onclick, которая успешно вызывает функцию handleCheckedChange с передачей ожидаемых данных. Это проверено и работает.

Однако, когда я запускаю: this.props.dispatch({type: "addPreferredChecked"}); из моего handleCheckedChange():

Я получаю эту ошибку:

TypeError: Cannot read property 'dispatch' of undefined
./src/containers/App.tsx.App.handleCheckedChange [as onChange]
src/containers/App.tsx:64

64 | this.props.dispatch ({тип: "addPreferredChecked"});

Я попытался вставить функцию mapDispatchToProps, а затем добавить ее в оператор connect, но затем props больше не отображает dispatch () в Chrome React Developer Inspect.

Я также успешно запустил store.dispatch({type: "addPreferredChecked"}); из index.tsx, где живет редуктор.

Кроме того, я чувствую себя довольно уверенно в своем коде избыточности в index.tsx, потому что я уже успешно настроил хранилище, connect и mapStateToProps для чтения полей из хранилища избыточности.

редуктор из Index.tsx:

  function reducer(state = initialState, action) {

     switch ( action.type ) {
        case "unCommunicationChecked":
          return {
            CommunicationChecked: false
          };
        case "unIdMyDeviceChecked":
          return {
            IdMyDeviceChecked: false
          };
        case "unPreferredChecked":
          return {
            PreferredChecked: false
          };
        case "addCommunicationChecked":
          return {
            CommunicationChecked: true
          };
        case "addIdMyDeviceChecked":
          return {
            IdMyDeviceChecked: true
          };
        case "addPreferredChecked":
          return {
            PreferredChecked: true
          };  
        default:
          return state;
      }
  }

const store = createStore(reducer);

// store.dispatch({type: "addPreferredChecked"}); successful results



  App.tsx:
    class App extends React.Component <Props, State> {

      handleCheckedChange(newCheck: boolean, Checktype: string) {

        if (newCheck === true) {
            Checktype = "un" + Checktype;
        } else if (newCheck === false) {
            Checktype = "add" + Checktype;
        } else {
            console.log("Bad handleCheckedChange call");
        }        
        this.props.dispatch({type: "addPreferredChecked"});

      }            

Answer 1

Для работы Redux существуют следующие минимальные требования:

1. Редуктор .У вас есть один function reducer(state = initialState, action).Но это должно быть исправлено.См. Ниже.

2. Подключение вашего компонента к хранилищу

   export default connect(
       (state) => state, // Selects which state properties are merged into the component's props
       (dispatch) => {
           return { 
               addPreferredChecked: () => dispatch({type: "addPreferredChecked"}),
               addIdMyDeviceChecked: () => dispatch ({type: "addIdMyDeviceChecked"})
           }
       })(App);
   

addPreferredChecked и addIdMyDeviceChecked называются создатели действий .

Вы должны использовать провайдера для предоставления доступа к хранилищу для App компонента

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

Также ваш reducer неверен.Редуктор должен всегда возвращать новое состояние , но ваш редуктор возвращает только измененную часть состояния.

Правильный редуктор может выглядеть как

function reducer(state = initialState, action) {
    switch ( action.type ) {
        case "unCommunicationChecked":
            return {
                ...state,
                CommunicationChecked: false
            };
       // And so on. Add ...state to all cases

Рабочий пример