How can I access redux store outside a component?

Asked
Active3 hr before
Viewed126 times

4 Answers

outsidecomponentaccessstoreredux
90%

If you need to dispatch actions from outside a React component, the same technique will work: import the store, then call store.dispatch(), passing the action you need to dispatch. It works the same as the dispatch function you get from props via react-redux’s connect function.,The React Redux connect function works great for regular React components, but if you need access to the Redux store in a plain function, the technique is a bit different.,It’s simple to get access to the store inside a React component – no need to pass the store as a prop or import it, just use the connect function from React Redux, and supply a mapStateToProps function that pulls out the data you need.,If you need access to the Redux store’s state from inside a thunk action creator, that’s even easier. You don’t even need to export the store, because thunk actions receive a getState argument.

import {
   createStore
} from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;
load more v
88%

1 If you just need to access a particular state from a particular reducer, you can try with redux-named-reducers it allows you access the latest state from anywhere. – miles_christian Apr 7 '18 at 8:16 ,You can even save this object to window property to access it from any part of application if you really want it (window.store = store),Export the store from the module you called createStore with. Then you are assured it will both be created and will not pollute the global window space.,Now I want to access a data point from my store, here is what that would look like if I was trying to fetch it within a react component using @connect

MyStore.js

const store = createStore(myReducer);
export store;

or

const store = createStore(myReducer);
export default store;

MyClient.js

import {
   store
} from './MyStore'
store.dispatch(...)

or if you used default

import store from './MyStore'
store.dispatch(...)

If you need multiple instances of a store, export a factory function. I would recommend making it async (returning a promise).

async function getUserStore(userId) {
   // check if user store exists and return or create it.
}
export getUserStore

On the client (in an async block)

import {
   getUserStore
} from './store'

const joeStore = await getUserStore('joe')
load more v
72%

React Redux provides APIs that allow your components to dispatch actions and subscribe to data updates from the store.,If you supply a custom context, React Redux will use that context instance instead of the one it creates and exports by default.,After you’ve supplied the custom context to <Provider />, you will need to supply this context instance to all of your connected components that are expected to connect to the same store:,The useStore hook returns the current store instance from the default ReactReduxContext. If you truly need to access the store, this is the recommended approach.

<Provider context={MyContext} store={store}>  <App /></Provider>
load more v
65%

Search Answer Titles

import store from './MyStore'
store.dispatch(...)

Other "outside-component" queries related to "How can I access redux store outside a component?"