React Redux - accessing existing store in a helper function

Question

I'm trying to get the store instance (store state) outside a react component, namely in a separate helper function. I have my reducer, my action, I have created a store in the most upper component.

// configStore.js

import { createStore } from 'redux';
import generalReducers from '../reducers/generalReducers';

export default function configStore(initialState) {
    return createStore(generalReducers, initialState);
}

// index.js


import { Provider } from 'react-redux';
import configStore from './store/configStore';

const initialReduxStoreConfig = {
    unit: 'm2',
    language: 'en'
}

const store = configStore(initialReduxStoreConfig);

ReactDOM.render((
    <Provider store={store}>
        <App/>    
    </Provider>
), document.querySelector('#root'));

// helpers.js

import configStore from '../store/configStore';

const store = configStore();

function getTranslation(key, lang = null) {
  console.log(store.getState());
}

This approach is not working as console.log(store.getState()) returns undefined. However, if I pass an initialConfig to configStore() it builds a new store and everything works just fine.

Thanks for help.

You can move store initialization code into separate module, export store and import it whereever you need to use it. — Flying
– Flying, Commented Oct 26, 2017 at 10:11
Could you be more specific please? I'm creating the store in a separate file, I'm calling the configStore() function in index.js — dallion
– dallion, Commented Oct 26, 2017 at 10:13

Flying · Accepted Answer · 2017-10-26 10:17:09Z

6

Your current code is not working because you're creating separate stores into index.js and helpers.js while you should use same Redux store.

You can move store initialization code into separate module, export store and import it whereever you need to use it.

// configStore.js
import {createStore} from 'redux';
import generalReducers from '../reducers/generalReducers';

export default function configStore(initialState) {
    return createStore(generalReducers, initialState);
}

// store.js
import configStore from './store/configStore';

const initialReduxStoreConfig = {
    unit: 'm2',
    language: 'en'
}

const store = configStore(initialReduxStoreConfig);

export default store;

// index.js
import {Provider} from 'react-redux';
import store from './store';

ReactDOM.render((
    <Provider store={store}>
        <App/>
    </Provider>
), document.querySelector('#root'));

// helpers.js
import store from './store';

function getTranslation(key, lang = null) {
    console.log(store.getState());
}

answered Oct 26, 2017 at 10:17

Flying

4,5802 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikeMurko Over a year ago

Put comment on similar question+response - if you call getTranslation while inside a reducer - redux isn't going to like it. Throws error asking you to pass it down

Collectives™ on Stack Overflow

React Redux - accessing existing store in a helper function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related