【问题标题】:Redux not dispatching actionRedux 没有调度动作
【发布时间】:2019-01-31 14:28:03
【问题描述】:

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

有没有办法发货?谢谢!

【问题讨论】:

  • 你可以用const mapDispatchToProps = { updateDeck };替换那个mapDispatchToProps,这很简单。

标签: reactjs redux react-dnd


【解决方案1】:

您正在尝试从 分派动作,但您需要 Redux 来分派动作本身。您的操作应该只返回一个具有type 属性和有效负载的对象(无论其他)。动作被connect() 函数和mapDispatchToProps 包裹在dispatch() 函数中。传统上,你确实喜欢这样......

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

有一些更短的方法可以做到这一点in this article,但这是传统方式。可以看到connect()函数接受了这个,并且会通过Redux store的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;
   }

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

    • 感谢您的回答!事实上,当我这样做时,我得到了这个错误:Uncaught TypeError: Cannot read property 'updateD' of undefined
    • @ZeyukanIch' 你是从 redux 导入你的函数吗?
    • 是的,我正在从我的操作中导入它
    【解决方案3】:

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

    我希望看到类似的东西:

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

    【讨论】:

      猜你喜欢
      • 2019-11-12
      • 1970-01-01
      • 2020-01-04
      • 2020-08-18
      • 2021-10-14
      • 2019-10-20
      • 1970-01-01
      • 1970-01-01
      • 2020-09-10
      相关资源
      最近更新 更多