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

Question

I would like to connect to the store in non-react components. My main problem is that the when i try to getState or dispatch in a non-react class like this: createStoreWithApi(api).dispatch(isLoading(true)) this will create a new instance of the store, and I just want to modify the already created store. And I know that I would have to avoid having the store as a function.

Is it possible to set the withExtraArgument after the store is created? Problem is that I cant just import the api in my store file, because I need to fetch the api from the backend first.

This is how my store set-up looks like:

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

Would love some advice

Answer 1

You can create a single instance of store in a create-store.js file that holds onto the store singleton. Then import that instance into all files that need access to it for store.getState and 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;

In your entrypoint file, you can run createStoreWithApi once with api and initialState .

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

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

And in all other files that need access to the store:

import store from "./create-store";

const state = store.getState();

As far as setting the API value. I'd recommend setting that in the store with a new reducer action. Then your middleware and other components will have access to it via const state = store.getState(); . Then you don't have to worry about initializing your store with it. And your components store.dispatch(setAPI("new api string")) then store.dispatch(isLoading(true)) . And your middleware making the calls can run store.getState() and get the current api value before making a backend call.