时间戳

首页 > 解决方案 > react-redux 调度未定义

reactjs - 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);

测试功能组件如下所示：

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

它给我错误说： TypeError: undefined is not an object (evaluating 'dispatch.add')

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

标签： reactjsreact-nativereact-redux

解决方案

我建议你组织你的代码。尝试将 action 和 reducers 移动到单独的文件中，例如 actions.js、reducers.js。

减速机需要一些修复：

  • 在最后一次返回的减速器示例中，您试图改变 state。
  • 此外，正如您在第二个中看到的那样，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 }
}

在 reducer 中，您将从App.js. 我建议您像这样在减速器内使用开关：

//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 的基本规则之一是“不要改变状态”。

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

//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);

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

工作沙箱示例：react-redux 示例

推荐阅读