dispatch 完全完成后如何访问 redux 状态？答案

【问题标题】：How to access redux state after dispatch is finished fully?dispatch 完全完成后如何访问 redux 状态？
【发布时间】：2021-12-30 09:41:35
【问题描述】：

我正在进行创建操作。当用户单击 onSubmit 时，我正在调度一个在数据库中创建资源并使用从 API 调用返回的信息更新存储的操作，其中包含状态（指示操作状态）和错误或消息等信息。

const initialState = {
   loading: true,
   status: false,
   error: false
}

以上是我的redux store的初始状态

const {loading,status} = useSelector(state=>state.newUser)

我正在使用 useSelector 消费状态

const addUser = (values) => async (dispatch) => {
    const response = // Makes an API call return information
    dispatch({type:"ADD_USER",payload:response.data})
}

onSubmit = (values)=>{
    dispatch(addUser(values))
    .then(data=>{
        console.log(data)
    })
    if(!status){
       
    }
}

在上面的 onSubmit 函数中，当用户提交表单时，它会分派一个操作并更新商店。现在基于新状态我想更新 UI。调度后，我正在检查操作的状态是真还是假。如果为假，我想显示错误。问题是在调度之后如果我尝试访问status 它会给我来自initialState 的status 值。我想在状态更新后执行if(!status)。

【问题讨论】：

使用async/await 或dispatch.then 作为您的addUser 操作返回一个承诺。
@morganney 正如你所说，我更新了我的代码。我使用了 dispatch.then 但是当我尝试 console.log 数据时我得到了 undefined
虽然您没有返回addUser 中的数据，但您正在更新商店。
如果我返回数据为什么我需要使用redux来做这个操作？我可以直接在没有 redux 的情况下进行 API 调用，并使用返回的数据更新 UI。那么根据您的说法，为此使用 redux 有意义吗？
是否要使用 redux 取决于您。您的问题的要点是您正在尝试读取数据而不等待异步操作完成。要么从addUser返回你想要读取的数据，要么从redux存储中读取它，但是无论你选择在异步操作之后执行它，即在then内部。附带说明一下，使用 redux 来调度和存储 API 调用是多余的和不必要的。您真的需要商店中的这些数据，还是只需要一个特定的 UI？

标签： reactjs redux redux-thunk

【解决方案1】：

在 Redux 中，一切都是声明式的，您不能像在 Promise 调用中那样等待异步操作。相反，您必须为失败分派一个操作并将错误存储在减速器中。

您的 thunk 应该如下所示

const addUser = (values) => async (dispatch) => {
    dispatch({type:"ADDING_USER"}) // You can use this for showing some loading state
    const response = await getDataFromAPI(values);
    if(response.status === 200) {
        dispatch({type:"ADD_USER_SUCCEEDED", data: response.data});
    } else {
        dispatch({type:"ADD_USER_FAILED", error: "API Failed" });
    }  
}

然后在组件中，您必须侦听您需要的所有值，并根据这些值以声明方式编写渲染逻辑。

const {loading,status,error} = useSelector(state=>state.newUser)

if(error)
   return <p>API Call failed</p>;
else if(loading)
   return <p> Loading </p>;
else 
   return <p> Data saved </p>

如果您需要基于它触发一些逻辑，那么您应该在 thunk 本身中执行此操作。如果你需要在 redux 状态中的值发生变化时从组件中触发某些功能，那么你必须使用 useEffect 并将值作为依赖项传递。

useEffect(() => triggerFunction, [status]);

【讨论】：