javascript - 如果有条件,Redux 在其他操作之后调用操作

标签 javascript reactjs redux react-redux redux-thunk

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

最佳答案

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

关于javascript - 如果有条件,Redux 在其他操作之后调用操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36824465/

相关文章:

javascript - 数据表复杂 header + sum api 不起作用

带有美元符号的 Javascript 函数声明

reactjs - 将规范化器与 ReduxForm 一起使用会导致表单始终脏乱

node.js - Express React cookie 问题

javascript - 我可以将 AJAX 调用放在展示组件中,还是应该提取一个容器?

javascript - import 在测试时返回 undefined 而不是 react 组件

javascript - 字形的 Bootstrap 样式作为按钮

javascript - 如何将这种无法识别的 CSS 特性转换为 javascript?

javascript - 组件未渲染

javascript - 如何在返回函数内迭代数组的数组 - ReactJS