複数のレジューサーを組み合わせる

Question

私は、私が適切に管理できるように私のレデューサーを複数のファイルに分割したいという状況があります。

私は還元剤で2つのことを行います。

1. ハンドル製品のみ。
2. 連絡先のみを処理します。

動作する同じファイルで実行できますが、管理が難しくなります。

私は移動ユーザーの読みやすさのために分割したいと思います。

ここで私はレデューサーのファイルを分割しようとしました。

これは私が製品をフェッチするために使用するレデューサーの1つです。

module.exports.products=function(state, action) { 
console.log("################################## branch_order"); 
console.log("reducer",state,action); 
if (state==null) { 
    return {}; 
} 
var new_state=$.extend(true,{},state); // XXX: deep-copy 
console.log(action.type,"action type") 
switch (action.type) { 
    case "PRODUCT_LOADING": 
     new_state.product_loading=true; 
     break; 
    case "PRODUCT_LOADED": 
     new_state.product_loading=false; 
     new_state.product=action.product; 
     break; 

} 
console.log("new_state",new_state); 
return new_state; 
} 

ここに、連絡先を格納する別の縮小機能があります。

module.exports.contacts=function(state, action) { 
console.log("################################## pawn_order",state); 
console.log("reducer",state,action); 
if (state==null) { 
    return {}; 
} 
return state; 

}

これは私が減速を組み合わせています方法です。

var product = require("./prodcut") 
var contact = require ("./contact") 
var combineReducers = require ('redux').combineReducers 


module.exports = combineReducers({product,contact}); 

これは私のメインファイルを呼び出して保存する方法です。

var reducers = require ("./reducer") /// <<<<< this is how i call 
var RPC = require('./RPC') 
//var actions = require("./actions") 
var createStoreWithMiddleware=applyMiddleware(thunkMiddleware)(createStore); 
var store=createStoreWithMiddleware(reducers); 
ReactDOM.render(<Provider store={store}><Index/></Provider> , document.getElementById('content')) 

私はcombine reducersからチュートリアルに従うことを試みたが、いくつかの問題に遭遇しました。

組み合わせが機能するようです。

どうしたのですか？私は状態のデータを追加したい最初の減速が（製品）が呼び出されると、第2減速が（接触）と呼ばれる ときに動作します

全体の状態が

を交換しているように見える（I ？どのように行うのか分からない助けてください）

をするだけの情報のため、これは私が私の接触した状態データを呼び出す方法です：

var select=function(state){ 
return { 
    product_loading:state.product_loading, 
    product:state.product, 

} 
} 

、どのようこれがあります私のコンポーネントで電話する

render:function(){ 
    if (!this.props.product_loading) return <div> Loading</div> 

ありがとうございます。いくつかの解決策を楽しみにしています。

Answer 1

combineReducersを使用する場合、各レデューサーは状態のスライスを見るだけです。

function r1(state) { 
    console.log (state); //logs v1 
} 

function r2(state) { 
    console.log (state); //logs v2 
} 

const c = combineReducers({ r1, r2 }); 

c({ r1: 'v1', r2: 'v2' }, { type: 'MY_ACTION' });