javascript - React Redux - accessing existing store in a helper function - Stack Overflow

admin管理员组

文章数量:1336304

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

// 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());
}

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

// 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.

• javascript
• reactjs
• react-redux
• store

Share Improve this question Follow edited Jul 11, 2018 at 22:27 Damjan Pavlica 34.1k1010 gold badges7575 silver badges7878 bronze badges asked Oct 26, 2017 at 10:08 dalliondallion 19555 silver badges1616 bronze badges 3

• You can move store initialization code into separate module, export store and import it whereever you need to use it. – 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 Commented Oct 26, 2017 at 10:13
• Take a look at my answer below for example solution – Flying Commented Oct 26, 2017 at 10:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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());
}

本文标签： javascriptReact Reduxaccessing existing store in a helper functionStack Overflow