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

Posted 2023-02-22

【中文标题】如果条件，Redux 在其他操作之后调用操作

【英文标题】：Redux call action after other action if condition

【发布时间】：2016-08-17 21:26:19

【问题描述】：

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

【问题讨论】：

您应该在验证发生时执行 saveAction，并使用它来修改 isValid 变量和减速器中的其他变量。等待 isValid 变量设置为 true 没有实际用途。

@bhargavponnapalli 问题是第二个动作是异步的（react-thunk），所以它不能与第一个动作结合。

您也许可以在异步操作中进行验证，而不是单独的验证操作。只是一个想法。

不是问题的答案，而是一个友好的提示：当您使用 Redux 时，我强烈建议您查看 Redux Sagas (github.com/yelouafi/redux-saga)。这是一个很小的学习曲线，但是一旦掌握了它，您将立即创建异步/同步操作。

【参考方案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
        
    ;

【参考方案2】：

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

//call it on button click

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


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

【讨论】：

我认为验证逻辑应该在 reducer 中，而不仅仅是在 clicnk hadler 中。关键是以'redux方式'实现它。

我的意思是 redux 操作 (redux.js.org/docs/basics/Actions.html) 不仅仅是 JS 方法

我不认为 reducer 是一个好地方。至于我，我更喜欢让 reducer 远离此类东西，并仅将它们用于更改组件状态。您可以创建类似 utils 文件的内容并将所有这些功能保留在那里。但是如果你不喜欢这个，我建议你看看 redux thunk，它可以让你在 action creators 中返回函数，你可以在那里指定你的逻辑。

我已经在使用 redux thunk。我可以用它创建异步操作，但如果有的话，我不能创建“操作然后异步操作”。可能没有一些代码我不明白你的想法。

如果你有很多验证肯定应该在一个方法中，那个方法可以存在于组件或动作文件中，这取决于逻辑对组件的具体程度。我不明白为什么您需要将 validate 作为单独的操作发送，您应该能够在 save 操作中发送它，然后任何尝试使用 save 的人都不必知道在保存之前调用 validate 。