javascript - React Redux - accediendo a la tienda existente en una función auxiliar

Estoy tratando de obtener la instancia de la tienda (estado de la tienda) fuera de un componente de React, concretamente en una función auxiliar separada. Tengo mi reductor, mi acción, he creado una tienda en el componente más superior.

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

Este enfoque no está funcionando ya que console.log(store.getState()) devuelve undefined. Sin embargo, si paso un initialConfig a configStore(), se crea una nueva tienda y todo funciona perfectamente.

Gracias por la ayuda.

Respuesta #1

Tu código actual no funciona porque estás creando tiendas separadas en index.js y helpers.js mientras deberías usar la misma tienda de Redux.

Puedes mover el código de inicialización de la tienda a un módulo separado, exportar la tienda e importarla dondequiera que necesites usarla.

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