2017-10-31 3 views
1

私のreduxの店のための以下のコードがあり、すべてが反応して配線されると正常に動作します。今..私は(反応の外に)アクションディスパッチャに店の現在の状態にアクセスしようとしていますが、私は最初の派遣後にこれを使用する空の値を取得していますreactxの外部のreduxの現在のストア状態にアクセスするにはどうすればよいですか?

import configureStore from '../../common/store/configureStore'; 
const history = createHistory(); 
const reduxRouterMiddleware = syncHistory(history); 
// Create a new Redux store instance 
const store = configureStore({},reduxRouterMiddleware); 
console.log("Store data ===>"+JSON.stringify(store.getState())); 

マイストア:

import {createStore, applyMiddleware, compose} from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from '../reducers'; 
import DevTools from '../containers/DevTools'; 
import createLogger from 'redux-logger'; 
import promise from 'redux-promise'; 


export default function configureStore(initialState, reduxRouterMiddleware) { 
    const logger = createLogger(); 
    const createStoreWithMiddleware = applyMiddleware(
     thunk,promise, 
     reduxRouterMiddleware 
    )(createStore); 

    const isProduction = process.env.NODE_ENV === 'production'; 
    let store; 
    if (!isProduction) { 
     store = createStoreWithMiddleware(rootReducer, initialState, compose(
      DevTools.instrument() 
     )); 
    } 
    else if(initialState!=''){ 
     store = createStoreWithMiddleware(rootReducer, initialState, compose(
     )); 
    }else{ 
     store = createStore(rootReducer) 
    } 
    if (module.hot) { 
     // Enable Webpack hot module replacement for reducers 
     module.hot.accept('../reducers',() => { 
      const nextRootReducer = require('../reducers'); 
      store.replaceReducer(nextRootReducer) 
     }) 
    } 
    return store 
} 

アップデート1:

私はグローバル変数として店を作るために私の店変数にいくつかの変更を行い、店を返すために機能を追加し、それが動作するようです。これは正しい方法ですか?

import {createStore, applyMiddleware, compose} from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from '../reducers'; 
import DevTools from '../containers/DevTools'; 
import createLogger from 'redux-logger'; 
import promise from 'redux-promise'; 

let store; 
export default function configureStore(initialState, reduxRouterMiddleware) { 
    const logger = createLogger(); 
    const createStoreWithMiddleware = applyMiddleware(
     thunk,promise, 
     reduxRouterMiddleware 
    )(createStore); 
    const isProduction = process.env.NODE_ENV === 'production'; 

    if (!isProduction && initialState!='') { 
     store = createStoreWithMiddleware(rootReducer, initialState, compose(
      DevTools.instrument() 
     )); 
    } 
    else if(initialState!=''){ 
     store = createStoreWithMiddleware(rootReducer, initialState, compose(
     )); 
    } 
    if (module.hot) { 
     // Enable Webpack hot module replacement for reducers 
     module.hot.accept('../reducers',() => { 
      const nextRootReducer = require('../reducers'); 
      store.replaceReducer(nextRootReducer) 
     }) 
    } 
    return store 
} 

export function returnStore() { 
    return store 
} 

下記のように店舗にアクセスできます。

import {returnStore} from '../../common/store/configureStore'; 
console.log("Store data rules ===>"+JSON.stringify(returnStore().getState().rules.data)); 

答えて

0

これはコメントですが、私は十分な評判を持っていないので、何らかの答えをさせてください。

まず、私はあなたのような学習者であり、JS、ReactまたはReduxの専門家ではありません。ちょうど好奇心のために、正確にあなたは店を必要としますか?ここにいくつかの場所、どのように私は店を得る:

  • 明らかに私はプロバイダを使用しています。
  • Reduxアクションクリエイターの場合、私はredux-thunkを使用しています。
  • React Router + Redux mixについては、react-router-reduxを使用しています。

もちろん、あなたが書いたような店を得ることができます。実際、私はあまりよく分かっていませんが、同様のコンセプトを使っていると思っています。アクションクリエータ関数(アクションクリエータ自体ではない)では、ストアからdispatchおよびgetStateを受け取ります。だから、どういうわけかあなたのように店からそれらのメソッドを返します。

0

あなたがredux-thunkを使用しているので、あなたはこのように任意のアクションクリエーターから店の現在の状態を取得することができます:あなたの代わりにグローバルストアを公開することを使用するように

function someAction() { 
    return (dispatch, getState) => { 
    console.log(store.getState()) 
    } 
} 

私の暗示があります。

関連する問題