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

【问题标题】：How can I connect to the store in non-react components如何在非反应组件中连接到商店
【发布时间】：2019-09-21 05:52:59
【问题描述】：

我想在非反应组件中连接到商店。我的主要问题是，当我尝试在这样的非反应类中使用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);
};

希望得到一些建议

【问题讨论】：

标签： javascript reactjs typescript redux react-redux

【解决方案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 值而言。我建议在商店中设置一个新的减速器动作。然后您的中间件和其他组件将可以通过const state = store.getState(); 访问它。然后你不必担心用它来初始化你的商店。和你的组件store.dispatch(setAPI("new api string")) 然后store.dispatch(isLoading(true))。并且您的中间件进行调用可以运行 store.getState() 并在进行后端调用之前获取当前的 api 值。

【讨论】：