Question

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

TypeError：无法读取未定义的属性“ dispatch”

我将非常感谢您的帮助，也请您知道这个项目正在使用React和Redux在Typescript中运行。

作为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（{type：“ addPreferredChecked”}）;

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

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

我对index.tsx中的redux代码也很有信心，因为我已经成功设置了存储，连接和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的工作需要满足以下最低要求：

Reducer。您有一个function reducer(state = initialState, action)。但是应该纠正。参见下文。

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。

您应该使用提供程序来提供对App组件的存储访问权限

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

您的reducer也有误。减速器应始终为return new state，但减速器仅返回经过修改的状态部分。

正确的减速器看起来像

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

Working example

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

1 个答案: