Redux 不调度动作

Question

我正在结合使用 React-dnd 和 Redux，但我无法发送操作。我的操作被调用，但减速器从未被调用：

const spelSource = {
    drop(props, monitor) {
        updateD(monitor.getItem(), props.spel);
    }
};

const mapDispatchToProps = {
    updateD: (newS, oldS) => updateDeck(newS, oldS),
};

export default connect(
    null, mapDispatchToProps
)(Spel)

Spel = DropTarget('spel', spelSource, collect)(Spel);

在我的行动中：

export function updateD(newS, oldS) {
    console.log("update");
    return function (dispatch) {
        return dispatch({
            type:"UPDATE_D",
            newS: newS,
            oldS: oldS
        });
    };
}

最后是减速器：

    case 'UPDATE_D':
        return Object.assign({}, state, {
            d: finalUpdate(state, action)
        });

有派送方式吗？谢谢！

Answer 1

您需要使用 this.props 从您的组件中正确地调度该操作。

例如，在 spelSource、this.props.updateD(monitor.getItem(), props.spel)

Answer 2

可能是一个错误，因为 action returns 是函数而不是对象。而且这个内部函数永远不会被调用。

我希望看到类似的内容：

const mapDispatchToProps = dispatch => {
  return {
    updateD: (newS, oldS) => dispatch({
            type:"UPDATE_D",
            newS: newS,
            oldS: oldS
        })
  }
}

Answer 3

您正在尝试从 调度操作 ，但您需要 Redux 来调度操作本身。您的操作应该只是 return 一个具有 type 属性和有效负载（无论其他什么）的对象。该操作通过 connect() 函数和 mapDispatchToProps 包装在 dispatch() 函数中。传统上，你喜欢这样......

const mapDispatchToProps = dispatch => ({
  updateD: (newS, oldS) => dispatch(updateDeck(newS, oldS))
});

有一些更短的方法可以做到这一点 in this article，但这是传统的方法。你可以看到 connect() 函数接受了这个并将它传递给 Redux store 的 dispatch() 方法。

然后，您的操作将只return对象：

export const UPDATE_D = 'UPDATE_D';

export const updateD = (newS, oldS) => ({
    type: UPDATE_D,
    newS,
    oldS
});

最后，你的减速器：

switch (action.type) {
  case UPDATE_D:
    return {
      ...state,
      newS: action.newS,
      oldS: action.oldS
     };
     default:
       return state;
   }

Redux 不调度动作

Redux not dispatching action

reactjs

redux

react-dnd