React Redux - ヘルパー関数内の既存のストアへのアクセス

Question

私は、反応コンポーネントの外に、つまり別のヘルパー関数でストアインスタンス（ストア状態）を取得しようとしています。私は私の減速機を持っています、私の行動、私は一番上のコンポーネントに店を作りました。

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

このアプローチは、はconsole.log（store.getState（））として動作していない未定義返します。しかし、configStore（）にinitialConfigを渡すと、新しいストアが構築され、すべて正常に動作します。

ありがとうございました。

Answer 1

とhelpers.jsに別々のストアを作成しているので、同じReduxストアを使用する必要があるため、現在のコードが機能しません。

ストア初期化コードを別のモジュールに移動したり、ストアをエクスポートしたり、必要に応じてインポートしたりできます。

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