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（））返回undefined。 但是，如果我將initialConfig傳遞給configStore（），它會構建一個新的商店，一切正常。

感謝幫助。

Answer 1

您當前的代碼無法正常工作，因為您要在index.js和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());
}