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

可能是操作返回一个函数而不是对象的错误。而且，永远不会调用此内部函数。

我希望看到类似的东西

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

Answer 3

您正在尝试从操作中分发，但是您需要Redux来分发操作本身。您的操作应仅返回一个具有type属性和有效负载的对象（无论如何）。 dispatch()函数和connect()将动作包装在mapDispatchToProps函数中。传统上，您确实喜欢这样...

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

in this article有一些更短的方法，但这是传统方法。您可以看到connect()函数接受了这一点，并将其通过Redux存储区的dispatch()方法传递。

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

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不调度动作

3 个答案: