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

Question

我应该如何在 redux 中实现以下逻辑：有 2 个动作：同步和异步。假设它的 validate() 和 save()。当用户单击按钮时 validate() 执行并更改状态存储中的一些 isValid 变量。然后如果 isValid 执行保存操作。

Answer 1

您可以'wrap' 'click handler' 中的那些功能。

//call it on button click

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

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

Answer 2

有很多方法可以做您喜欢的事。但是，作为一般规则，不要在 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
        }
    };
}

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

Redux call action after other action if condition

javascript

reactjs

redux

react-redux

redux-thunk