从 reducer 中从服务器获取

Posted 2023-02-21

【中文标题】从 reducer 中从服务器获取

【英文标题】：Fetching from a server from within a reducer

【发布时间】：2022-01-23 21:59:42

【问题描述】：

我正在使用 react 和 Immer 来制作一个非常简单的前端。我需要显示的数据是简单的嵌套 Json。 json 以状态存储在树的顶部，使用 immer 的简单 reducer 允许编辑 json。 我想添加一个按钮，从服务器上的 json 触发刷新 json 状态。

function SectionRender(props)
    
      const [jsonData, jsonDispatch] = useImmerReducer(jsonDataReducer, props.json);
      const handleRefreshClick = () => jsonDispatch( type:"refresh")
return  <div> 
        /* rest of display */ 
        <button onClick=handleRefreshClick>Reinitialiser</button>
        </div>

这是顶部。它与减速器一起使用：

function jsonDataReducer(draft, action) 
    switch (action.type) 
        /* other cases for edit */
        case "refresh":
            const newStuff = getServerData().then(
            (value) => 
                console.log("we got something");
                //something that would modify the state here??
            ,
            () => 
                console.log("no server response")           
            )
            break;
        default:
            break;
    

我尝试返回“新东西”值。但是由于它是一个承诺，整个状态都变成了一个承诺，当它尝试渲染时，其余的显示崩溃。在 .then() 中修改草稿似乎也不起作用（可能是因为该函数早已返回可变草稿）。

很明显，我可能没有正确地构建事物，但我不知道我应该如何构建它，或者我应该做什么来允许从异步函数调用中修改状态。

【参考方案1】：

Reducer 是纯函数，您应该避免在其中添加任何副作用，例如异步调用。因此，请尝试将这个异步逻辑排除在 reducer 之外（在 handleRefreshClick 期间），一旦您从异步调用接收到输出，然后使用从调用返回的数据调度操作以修改状态。

喜欢

const handleRefreshClick = () => 
    getServerData().then(
        (value) => 
            jsonDispatch( type:"refresh", data: value)
        ,
        () => 
            console.log("no server response")           
        )

【讨论】：

当我从减速器中取出异步调用时，我意识到这会产生另一个密切相关的问题。如果不在 reducer 中，如何将状态推送回服务器？