简单的 Redux-React 尝试通过 this.props.dispatch 更新状态

Question

当我点击复选框时，this.props.dispatch({type: "addPreferredChecked"});会导致此错误：

TypeError: 无法读取未定义的属性 'dispatch'

我将非常感谢您的帮助，同时也让您知道这个项目是在带有 React 和 Redux 的 Typescript 中运行的。

作为 Redux 新手，我只是想在单击复选框时简单地将 HTML 复选框选中属性从 true 更改为 false，反之亦然。我的演示组件具有成功调用 handleCheckedChange 函数并传入预期数据的 onclick 逻辑。这是经过测试并且可以正常工作的。

但是当我运行时：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({type: "addPreferredChecked"});

我曾尝试放入 mapDispatchToProps 函数，然后将其添加到 connect 语句，但随后 props 不再在 Chrome React Developer Inspect 中显示 dispatch()。

我还成功地从减速器所在的 index.tsx 中运行了store.dispatch({type: "addPreferredChecked"});。

我对 index.tsx 中的 redux 代码也很有信心，因为我已经成功设置了 store、connect 和 mapStateToProps 以从 redux 存储中读取字段。

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. Reducer。你有一个function reducer(state = initialState, action)。但它应该被纠正。见下文。

2. Connect你要存储的组件

   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 被称为action creators。

1. 您应该使用 Provider 为 App 组件提供对 store 的访问权限

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

您的reducer 也不正确。 Reducer 应该总是return new state，但是你的reducer 只返回改变的部分状态。

正确的减速器看起来像

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

Working example