Redux store.getState() 返回初始状态值

Question

我配置了 Redux 存储，并且尝试从 React 组件外部访问状态。我正在使用store.getState()，但它会返回商店中所有内容的初始状态值，即使商店填充了正确的数据（在 UI 和开发工具中可见）。似乎只是当导入商店并通过getState()返回初始值而不是商店中实际的值来访问状态时。代码如下。

商店.ts

    import * as _ from "@reduxjs/toolkit/node_modules/redux-thunk";
    import { Action, configureStore } from "@reduxjs/toolkit";
    import { ThunkAction } from "redux-thunk";
    import { useDispatch } from "react-redux";
    import reducers from "./reducers";

    const store = configureStore({
        reducer: reducers,
        middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware({
                serializableCheck: false,
            }),
    });

    export type AppDispatch = typeof store.dispatch;

    export type IRootState = ReturnType<typeof store.getState>;

    export type AppThunk = ThunkAction<void, IRootState, unknown, Action<string>>;

    // Export a hook that can be reused to resolve types
    export const useAppDispatch = () => useDispatch<AppDispatch>();

    export default store;

我从以下位置致电商店的服务：

    import store from "store";
    import { LoggingService } from "logger";

    const logData(data) {
      const user = store.getState().user;
      
      LoggingService.log(user.email, data);
    }

在上面的示例中，store.getState().user返回一个对象，但email为 null。然而，email实际上已经填充了，正如在 UI 和开发工具中可以看到的那样。任何帮助将非常感激。

另请注意，这不是 SSR 应用程序。

Answer 1

仅从store.getState()redux 存储返回一次当前状态。随后通过调度操作更改状态将不会再次调用此方法，除非使用subscribe(listener)。

\n

store.subscribe我们可以编写一个自定义的可观察存储实用程序，而不是直接使用。为什么？参见问题#303

\n

index.js:

\n

export function toObservable(store) {\n  return {\n    subscribe({ onNext }) {\n      let dispose = store.subscribe(() => onNext(store.getState()));\n      onNext(store.getState());\n      return { dispose };\n    },\n  };\n}\n

\n

如何使用它？让我们编写一个测试来解释这一点：

\n

export function toObservable(store) {\n  return {\n    subscribe({ onNext }) {\n      let dispose = store.subscribe(() => onNext(store.getState()));\n      onNext(store.getState());\n      return { dispose };\n    },\n  };\n}\n

\n

测试结果：

\n

import { combineReducers, createStore } from \'redux\';\nimport { toObservable } from \'./\';\n\nconst LoggingService = {\n  log: console.log,\n};\n\ndescribe(\'toObservable\', () => {\n  test(\'should pass\', () => {\n    function userReducer(state = { email: \'\' }, action) {\n      switch (action.type) {\n        case \'GET_USER_FULFILLED\':\n          return { ...state, ...action.payload };\n        default:\n          return state;\n      }\n    }\n    const store = createStore(combineReducers({ user: userReducer }));\n\n    // create store observable somewhere, may be in the application initialization phase \n    const store$ = toObservable(store);\n    store$.subscribe({ onNext: (state) => LoggingService.log(state.user.email) });\n\n    // Later, dispatch action in component\n    store.dispatch({ type: \'GET_USER_FULFILLED\', payload: { email: \'example@gmail.com\' } });\n  });\n});\n

\n

正如你所看到的，每次状态改变时，该onNext方法都会被调用。

\n