Redux没有调度动作

问题描述 投票:0回答:3

我正在使用React-dnd与Redux结合使用但我无法发送动作。我的动作被调用,但永远不会调用reducer:

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

有没有办法派遣?谢谢!

reactjs redux react-dnd
3个回答
1
投票

您正尝试从操作中调度,但您需要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;
   }

1
投票

您需要使用this.props从您的组件中正确分派该操作。

例如,在spelSourcethis.props.updateD(monitor.getItem(), props.spel)


1
投票

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

我希望看到类似的东西:

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

© www.soinside.com 2019 - 2024. All rights reserved.