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;

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

// 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值。

如何使用非反应组件连接到商店

1 个答案: