如何在非反应组件中连接到商店

Question

我想在非反应组件中连接到商店。 我的主要问题是，当我尝试getState或在非反应类中dispatch ，如下所示： createStoreWithApi(api).dispatch(isLoading(true))这将创建一个新的商店实例，我只想修改已经创建的商店。 而且我知道我必须避免将商店作为一种功能。

是否可以在创建商店后设置withExtraArgument ？ 问题是我不能在我的商店文件中导入api ，因为我需要先从后端获取api。

这就是我的商店设置的样子：

const createStoreWithApi = (api: IApi, initialState?: {}) => {
  const middlewares = [
    thunkMiddleware.withExtraArgument({
      api
    })
  ];
  const enhancer = composeWithDevTools(applyMiddleware(...middlewares));
  return createStore(rootReducer, initialState!, enhancer);
};

会喜欢一些建议

Answer 1

您可以在保存到商店单例的create-store.js文件中创建单个存储实例。 然后将该实例导入到需要访问store.getState和store.dispatch所有文件中。

// create-store.js
let store = null;

export const createStoreWithApi = (api: IApi, initialState?: {}) => {
  const middlewares = [
    thunkMiddleware.withExtraArgument({
      api
    })
  ];
  const enhancer = composeWithDevTools(applyMiddleware(...middlewares));
  store = createStore(rootReducer, initialState!, enhancer);
};

export default store;

在您的入口点文件中，您可以使用api和initialState运行createStoreWithApi一次。

// index.js
import { createStoreWithApi } from "./create-store";

// init store
createStoreWithApi("api string", {...initialState});

在需要访问商店的所有其他文件中：

import store from "./create-store";

const state = store.getState();

至于设置API值。 我建议使用新的reducer动作在商店中设置它。 然后您的中间件和其他组件将通过const state = store.getState(); 。 然后，您不必担心使用它初始化您的商店。 你的组件store.dispatch(setAPI("new api string"))然后是store.dispatch(isLoading(true)) 。 并且您的中间件进行调用可以运行store.getState()并在进行后端调用之前获取当前的api值。