如何在正确调度另一个动作的情况下调度一个动作？使用 redux thunk（反应）

Question

我正在努力寻找如何使用 redux thunk 最好地分派多个操作的方法。首先，我想把所有的 thunk 隔离开来，不要混合它们，因为它当然可以让我在任何地方使用它们（在一个视图中，我可以发送 fetchData，然后显示一条消息，说“数据已成功获取”，在另一个视图中在获取数据之后只是获取其他东西或者在某些情况下我想在我的 thunk 被成功发送时执行代码）。例如，假设我有下一个 thunk:

export const fetchData = () => async (dispatch, getState) => {
  dispatch(fetchDataStart())
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/photos')
    const data = await response.json()
    dispatch(fetchDataSuccess(data))
    // should i dispatch actions here and create more thunks like this one for differents 
    // situations 
  } catch (error) {
    dispatch(fetchDataFailed(error))
    throw error // is this throw error correct to stop the flow of the code
  }
}

在我的组件中，我分派该操作以获取我需要的数据：

useEffect(() => {
    // should i make this function async and await for the first dispatch and then dispatch 
    // another function
    const loadUsers = () => {
       dispatch(fetchData())
       // await dispatch(fetchData())
       // dispatch(nextAction())
    }
    loadUsers()
  },[ ])

根据第一次获取分派另一个操作的正确方法是什么？

如果获取不成功，我是否应该在 thunk 中抛出错误以避免调度其他操作？

我应该在组件中调度下一个动作，还是根据我想在一个动作后做什么，为每种不同的情况创建越来越多的 thunk？（这会使我的动作文件更大）

提前感谢您的帮助

Answer 1

让我们一一解答您的问题。[答案基于我在项目中的经验]。

1)根据第一次获取分派另一个操作的正确方法是什么？ 正确的方法是从组件中分派操作。例如（伪代码），

function demo(props){
dispatch(fetchDataStart());
if(props.data==="yes")
dispatch(nextAction())
}

props 将是来自 redux store 的数据，因此一旦存储更新，它将在状态更改时触发下一个操作。

如果获取不成功，我是否应该在 thunk 中抛出错误以避免调度其他操作？ 是的，错误应该存储在 redux store 中（您可以使用 reducer）。

3)我应该在组件中调度下一个动作，还是根据我想在一个动作后做什么，为每种不同的情况创建越来越多的 thunk？（这会使我的动作文件更大） => 我们不会根据操作创建中间件。我们基于我们的组件创建中间件。因此，如果我们有数据组件，那么我们可能只有一个中间件，我们可以在我们的 action.js 文件中有多个操作。

这是我们在项目中遵循的方法，它确实很有帮助。我们将所有内容保存在一个文件夹存储中，在它下面我们有子文件夹，如 actions、reducers、selectors、middleware

如何在正确调度另一个动作的情况下调度一个动作？使用 redux thunk（反应）

How to dispatch an action just if another action was correctly dispatched ? Using redux thunk (react)

reactjs

redux

redux-thunk