Redux - アプリケーション状態にキーとして還元剤の名前があります

Question

誰かがこの問題を手伝ってくれますか？ 私はReactとReduxを学び始めましたが、私は数日からreduxを設定することに固執しています。

何かアクションがトリガされたとき、reducersスタックを介して還元すると、アプリケーションの状態を表すオブジェクトが返されるはずです。 は残念ながら、それは{reducerName =>減速結果}を持つオブジェクトを返します。基本的に私は4つのレデューサー、ファンクションstore.getStateを（）した場合

{ 
'reducerOne': entireApplicationState 
'reducerTwo': entireApplicationState 
'reducerThree': entireApplicationState 
'reducerFour': entireApplicationState 
} 

のようなものを返す誰かができれば、私は本当に感謝しますことを意味し私はすべてのアイデアを終えたので、私を助けて:)

をこれは私のapplication.jsです：

import React from 'react'; 
import ReactDom from 'react-dom'; 
import HomePage from 'root_views/home'; 
import {store} from 'root_services/redux/store'; 

class Application extends React.Component { 

     constructor(props) { 
      super(props); 
     } 

     render() { 
      return (
       <HomePage/> 
      ) 
     } 

} 

var Provider = React.createClass({ 
     childContextTypes: { 
      store: React.PropTypes.object.isRequired 
     }, 
     getChildContext: function() { 
      return {store: this.props.store} 
     }, 
     render: function() { 
      return this.props.children; 
     } 
}); 


ReactDom.render(
     <Provider store={store}> 
      <Application/> 
     </Provider>, 
     document.getElementById('application') 
); 

マイstore.js

import { createStore } from 'redux'; 

    import {rootReducer} from './reducers/container'; 

    export const store = createStore(
     rootReducer, 
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
    ); 

マイcontainer.js基本的にすべての私の減速に

import {combineReducers} from 'redux'; 

// This is just the action label 
import {DATA_EXCHANGE_LOAD} from 'root_services/redux/actions/container' 

const initialState = { 
    data_exchange: {}, 
} 

function dataExchange(state = {}, action) { 

    switch (action.type) { 

     case DATA_EXCHANGE_LOAD: 
      return Object.assign({}, state, { 
       data_exchange:{'reducerOne':'dataExchange'} 
      }); 
      break; 

     default: 
      return initialState; 
      break; 

    } 
}; 

function testReducer(state = {}, action) { 
    switch (action.type) { 

     case DATA_EXCHANGE_LOAD: 
      return Object.assign({}, state, { 
       data_exchange:{'reducerTwo':'testReducer'} 
      }); 
      break; 

     default: 
      return initialState; 
      break; 
    } 

}; 

// Export the combined reducers 
export const rootReducer = combineReducers({ 
    dataExchange, 
    testReducer 
}); 

が含まれているこれは、イベントをトリガーするアクションです：

export function dataExchangeLoad(){ 
    return { 
     type: DATA_EXCHANGE_LOAD, 
    } 
}; 

これはアクション私のコンポーネントでありますがトリガーされる：

import React from 'react' 
import "../components/layouts/header/header.less"; 
import {dataExchangeLoad} from "root_services/redux/actions/container" 

export default class HomePage extends React.Component { 

    constructor(props, {store}) { 
     super(props); 
     store.dispatch(dataExchangeLoad()); 
     console.log(store.getState()); 
    } 

    render() { 
     return (
      <div> 
       <h1>test</h1> 
      </div> 
     ) 
    } 
}; 

HomePage.contextTypes = { 
    store: React.PropTypes.object, 
} 

これが結果です：

Object {dataExchange: Object, testReducer: Object} 

Answer 1

すでにコメントcombineReducersに答えたので実際にそのように動作します。あなたがそれぞれの状態を順番に更新するすべてのアクションを実行するように減速機をチェーンしたい場合は、reduce-reducersを使用できます。

import reduceReducers from 'reduce-reducers'; 

const reducer1 = (state = {}, action) => { 
    if (action.type === 'foo') { 
    return ({ 
     ...state, 
     touchedBy: ['reducer1'], 
    }) 
    } 
    return state; 
}; 

const reducer2 = (state = {}, action) => { 
    if (action.type === 'foo') { 
    return ({ 
     ...state, 
     touchedBy: state.touchedBy.concat('reducer2'), 
    }) 
    } 
    return state; 
}; 

const reducer = reduceReducers(reducer1, reducer2); 

expect(reducer({}, { type: 'foo' })) 
    .toMatchObject({ touchedBy: ['reducer1', 'reducer2'] });