react-redux调度未定义

如何解决react-redux调度未定义

在我的App.js中：

const initialAppState = {
  nums: {},};
const reducer = (state = initialAppState,action) => {
  if (
    action.a === undefined ||
    action.b === undefined ||
    action.c === undefined
  ) {
    return state;
  }
  if (state.nums[action.a][action.b] === undefined) {
    state.nums[action.a][action.b] = {};
  }
  return {
    nums: (state.nums[action.a][action.b] =
      action.c),};
};

const store = createStore(reducer);

然后将其通过 Provider 传递。 在我的Test.js中，我试图更改它的值会给我错误：

const mapStateToProps = (state) => {
  return {
    nums: state.nums,};
};

function mapDispatchToProps(dispatch) {
  return {
    add: (a,b,c) =>
      dispatch({a: a,b: b,c: c}),};
}
export default connect(mapStateToProps,mapDispatchToProps())(Test);

Test功能组件如下所示：

function Test({nums,dispatch})
...
function add(data,count) {
    dispatch.add('1','2','3');
  }

这让我出错： TypeError: undefined is not an object (evaluating 'dispatch.add')

它不应该将调度识别为Test的参数，而add是该功能组件的另一个功能吗？

解决方法

我建议您整理代码。尝试将动作和reducers移到单独的文件中，例如actions.js，reducers.js。

减速器需要一些修复：

• 在上次返回的reducer示例中，您尝试突变状态。
• 第二个if中也没有return。

---

行动和减少剂分离建议

在您的App.js内，您将创建Store：

//App.js
import { reducer } from "./reducers"

const store = createStore(reducer);
<Provider store={ store }>
 ...
</Provider>

现在让我们来制作actions.js文件：

//actions.js
export const ADD_ACTION='ADD_ACTION' // action type

export function addAction(data) {
 return { type: ADD_ACTION,data }
}

在化简器中，您将从App.js中移出部分代码。我建议您像这样在减速器内使用 switch ：

//reducers.js
import { ADD_ACTION } from "./actions";

const initialAppState = {
  nums: {},};

export const reducer = (state = initialAppState,action) => {
  switch(action.type) {
    case ADD_ACTION:
      return Object.assign({},state,{ nums: action.data });
    default:
      return state
   }
};

如您所见，ADD_ACTION之一正在返回具有更新的nums值的新对象。这是因为必要的Redux规则之一是"Do not mutate state"。

现在，让我们在Test.js中尝试我们的操作。首先从addAction导入actions.js。然后以dispatch作为参数调用addAction。

//Test.js functional component version
import { addAction } from "./actions";

function Test({dispatch}) {
  ...
  function add(data,count) {
    dispatch(addAction(data));
  }
}

export default connect(null,null)(Test);

组件从连接接收dispatch。 Connect具有（null，null），因为在这种情况下，我们既不使用mapStateToProps，也不使用mapDispatchToProps。

额外提示：对于班级组件，您将以一些不同的方式使用动作。

//Test.js Class component version
import React from 'react';
import { addAction } from "./actions";
import { connect } from 'react-redux';

class TestClass extends React.Component {
  render() {
    return(
      <button onClick={() => this.props.addAction(2)}>Action</button>
    )
  }
}

const mapDispatchToProps = ({
 addAction
});

export default connect(null,mapDispatchToProps)(TestClass);

在类组件示例中，当onClick事件触发时，您将调用值为2的操作。

工作沙箱示例：react-redux example

,

它不是dispatch.add()的{​​{1}}

props.add()