渲染在 redux 更新过程中被触发

Question

redux 更新是同步的吗？我们可以期望在触发渲染代码之前完成整个更新吗？

假设您有一个中间件，它从一个 redux 存储捕获事件并相应地更新另一个不同的 redux 存储，以保持它们同步。

const MyMiddleware: Middleware = (store: MiddlewareAPI<AppDispatch, RootState>) => (next) => (action) => {
    console.log('MyMiddleware start');
    const result = next(action); // apply reducer1

    if (action.type === reducer1Types.SET_ACTIVE_WORKSPACE) {
        console.log(`MyMiddleware middle`);
        store.dispatch(reducer2Actions.initializeWorkspace(action.payload.workspace));
    }

    console.log(`MyMiddleware end`);
    return result;
};

但是，由于某种原因，当reducer1已经更新并且reducer2未运行时，App.jsx#render函数被调用。在控制台中，它会是

> MyMiddleware start
> <logging from App.jsx#render>
> MyMiddleware middle
> MyMiddleware end

这是预期的吗？

当我跟踪这段代码时，我还看到它在退出中间件之前进入渲染逻辑：

店铺布置：

export const store = configureStore({
    reducer: {
        reducer1: reducer1.reducer,
        reducer2: reducer2.reducer,
    },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().prepend(MyMiddleware),
});

Answer 1

只需要使用batch api。 （运行 React 16）

const MyMiddleware: Middleware = (store: MiddlewareAPI<AppDispatch, RootState>) => (next) => (action) => {
    let result = null;
    batch(() => {
        result = next(action);
        if (action.type === reducer1Types.SET_ACTIVE_WORKSPACE) {
            store.dispatch(reducer2Actions.initializeWorkspace(action.payload.workspace));
        }
    });
    return result;
};

批处理逻辑似乎在某些情况下默认应用，但在其他情况下则不然。