3

我正在我目前正在构建的 React 框架中试验 Recoil。在我的用例中，应用程序将根据用户活动生成一个操作对象，然后将其发送到服务器，从中获取应用程序状态。

动作存储在反冲atom中。我正在使用一个selectorFamily接受动作并从服务器获取状态的反冲。以下是我实际在做的简单示例（代码在打字稿中）：

export const MyActionAtom = atom<MyAction|undefined>({
    key: "MyActionAtom",
    default: undefined
});

const MyStateSelectorFamily = selectorFamily({
    key: 'MyStateSelectorFamily',
    get: (action: MyAction|undefined) => async ({get}) => {        
        if (action) {
           return await getStateFromServer(action);
        }
        return SomeFallbackState;
    }
});

const MyStateSelector = selector({
    key: 'MyStateSelector ',
    get: ({get}) => {
        return get(MyStateSelectorFamily(get(MyActionAtom)));
    }
});


function App() {
    const appState = useRecoilValue(MyStateSelector);
    return (
        <RecoilRoot>
            <React.Suspense fallback={<div>Loading...</div>}>
                <MyApp state={appState} />
            </React.Suspense>
        </RecoilRoot>
    );
}

这里，MyApp是一个反应组件，它将基于 appState 呈现应用程序的整个视图树。

现在，从一个组件的直接或间接子组件中，MyApp可能会触发另一个操作：

const setMyAction = useSetRecoilState(MyActionAtom);
setMyAction(...);

结果与setMyAction我初始化应用程序的初始状态相比，值略有偏差。因此，我想只重新渲染依赖于更改状态的组件。

但是，我的整个视图树都会更新。我怀疑的原因React.Suspense是用回退替换dom，直到返回操作的响应（注意这MyStateSelectorFamily是异步的，因为状态作为承诺返回）。

在一个更像 redux 的世界中，我会在 promise 解决后触发我的请求并发送状态更改（并且我打算以不同于React.Suspense为我做的方式处理加载状态）。

有没有办法阻止我的应用重新渲染？我已经看到使用反冲Loadables来避免的示例React.Suspense，但是当可加载处于状态时，我正在努力获取旧的应用程序loading状态。

更新

当我进一步试验时，我能够使用 dispatch 方法让它模仿 reducer 方法：

  1. 我摆脱了动作原子，并变成MyStateSelectorFamily了原子本身：

    const MyStateAtom = atom({
    key: 'MyStateAtom ',
    default: SomeFallbackState
});

  2. 我用setMyAction(...);自定义钩子替换了更改状态的组件中的部分：

    // in some dedicated ts file:
export const useAction = () => {
    const dispatch = useSetRecoilState(MyStateAtom);
    return useCallback(async (action: MyAction) => {
        await getStateFromServer(action).then(dispatch);
    }, [dispatch]);
};

  3. 我在组件中使用了钩子：

     export const SomeComponent = (props: SomeProps) => {
     const dispatchAction = useAction();
     // other logic
     const action: MyAction = ... // create the appropriate action
     dispatchAction(action);

     return (...);
 };

好吧，这似乎可以按我的意愿工作，并且更接近我以前使用 redux 的代码库，所以我比selectorFamily以前的方法更喜欢这种方法。但是，我经常看到控制台中打印出反应警告：

 Warning: Cannot update a component (`Batcher`) while rendering a 
 different component (`SomeComponent`) ....

我的应用程序是一个 SPA 应用程序，警告会在初始加载时打印。然后它可以正常工作，没有可观察到的问题。我想知道我是否可以解决警告的原因——这Batcher似乎是一个反冲的事情，我想我没有做正确的事情来打破它。

4

1 回答 1

1

此处讨论弹出警告的原因。这基本上是 Recoil 内部的逻辑流程错误，将在下一个版本中修复。目前你无能为力，但它只会在开发模式下弹出，而在生产模式下，警告会被忽略。

于 2020-08-29T09:04:53.367 回答