如何通过非反应组件连接到商店

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文件中创建一个存储在商店Singleton上的单个实例。然后将该实例导入所有需要访问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值。我建议您通过新的还原动作在商店中设置它。然后，您的中间软件和其他组件将可以通过const state = store.getState();访问它。那么，您不必担心用它初始化商店。和您的组件store.dispatch(setAPI("new api string"))然后store.dispatch(isLoading(true))。然后，您的中间件进行呼叫可以运行store.getState()并在进行后端呼叫之前获取当前的API值。