Question

我应该如何在redux中实现以下逻辑：有2个动作：sync和async。让我们说它的validate（）和save（）。当用户单击执行的按钮validate()时，它会更改状态存储中的某些isValid变量。然后，如果执行isValid保存操作。

Answer 1

有很多方法可以做你想做的事。但是，作为一般规则，不要在Redux中存储可以派生的任何内容。 isValid可以通过在您的字段上运行验证来获得。而且，我不认为像更改的表单字段值这样的中间状态属于Redux。我将它们存储在React状态，直到它们被认为有效并提交。

正如Spooner在评论中提到的那样，你可以在thunk中调用同步动作。或者你可以访问thunk中的状态。

选项＃1

// Action Creator
export default function doSomething(isValid) {
    return (dispatch) => {

        dispatch(setValid(isValid));

        if (isValid) {
            return fetch() //... dispatch on success or failure
        }
    };
}

选项＃2

// Component
dispatch(setValid(isValid));
dispatch(doSomething());

// Action Creator
export default function doSomething() {
    return (dispatch, getState) => {

        const isValid = getState().isValid;

        if (isValid) {
            return fetch() //... dispatch on success or failure
        }
    };
}

Answer 2

您可以在“点击处理程序”中“包装”这些功能。

//call it on button click

handleClick = () => {
  if (validate()) {
    //call save function
    save()
  }
}

validate = () => {
  //do something
  //check validness and then
  if (valid) return true 
}

如果条件，其他操作后Redux调用操作

2 个答案: