javascript - 如何等待 react-redux 中的特定道具更改

Question

我正在尝试编写一个通知，以便在成功对 API 进行 fetch 调用时显示。我正在使用带有 thunk 的 redux 来获取它，它将名为 loading 的道具的状态更改为 true/false，并将错误道具的状态更改为 null/字符串格式的错误。我怎么能做到这一点？

标签： javascriptreactjsreduxreact-redux

Answer 1

您需要有一个额外的字段来通知组件提取已结束。例如，在您将加载设置为 false 时，您可以在其中一个reducerdispatch(fetchSuccess(...))中添加一个消息字段：

...
switch(action.type){
   case FETCH_SUCCESS:
      return {...state, data: action.payload, loading: false, message: 'success'}
...
}

那是什么并不重要。如果您的 API 发回statusCode: 200成功响应，您可以将其用作消息。

另一种选择是创建一个选择器并观察特定的data: action.payload变化。

PS：如果您的通知处理是通过单独的 redux reducer 完成的，您也可以这样做：

...
try{
   dispatch(fetchLoading())
   ...
   const response = await axios.get(...)
   const data = response.data
   ...
   dispatch(fetchSuccess(data))
   disaptch(openNotification())
} catch(error){
   dispatch(fetchError(error.message))
}
...