2015-09-20 26 views
15

私は'simplest-redux-example' on githubでうんざりしています。私はstate.countを減少させる2番目のレデューサーを追加しました。私がswitch caseステートメントでインクリメントとデクリメントレデューサーを持っていればうまく動作します。私が実行したかったエクササイズは、減速機をできるだけ多くのモジュール部品に分割することでした。このコードは、countが未定義であるというエラーをスローします。 combineReducersに渡さ同じ状態キーを初期化するReduxレデューサー

import React from 'react'; 
import { createStore, combineReducers } from 'redux'; 
import { Provider, connect } from 'react-redux'; 

// React component 
class Counter extends React.Component { 
    render(){ 
    const { value, onIncreaseClick, onDecreaseClick } = this.props; 
    return (
     <div> 
     <span>{value}</span> 
     <button onClick={onIncreaseClick}>Increase</button> 
     <button onClick={onDecreaseClick}>Decrease</button> 
     </div> 
    ); 
    } 
} 

// Action: 
const increaseAction = {type: 'increase'}; 
const decreaseAction = {type: 'decrease'}; 

// Reducer: 
function counter(state, action) { 
    let count = state.count; 
    switch(action.type){ 
    case 'increase': 
     return {count: count+1}; 
    default: 
     return state; 
    } 
} 
function decrementer(state, action) { 
    let count = state.count; 
    switch(action.type){ 
    case 'decrease': 
     return {count: count -1}; 
    default: 
     return state; 
    } 
} 
const rootReducer = combineReducers({ 
    counter, 
    decrementer 
}) 

// Store: 
let store = createStore(rootReducer, {count: 0}); 

// Map Redux state to component props 
function mapStateToProps(state) { 
    console.log("mapStatetoProps heyyyy"); 
    return { 
    value: state.count 
    }; 
} 

// Map Redux actions to component props 
function mapDispatchToProps(dispatch) { 
    console.log("mapDispatchtoProps heyyyy"); 
    return { 
    onIncreaseClick:() => dispatch(increaseAction), 
    onDecreaseClick:() => dispatch(decreaseAction) 
    }; 
} 

// Connected Component: 
let App = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Counter); 

React.render(
    <Provider store={store}> 
    {() => <App />} 
    </Provider>, 
    document.getElementById('root') 
); 
+0

を、それはそれを述べてどのラインで次のようにそれらをデフォルトパラメータを供給するために、このように

、? – zerkms

+0

はカウンタ機能のlet count = state.countにあります。 – tells

+0

そして、あなたは 'console.log(state)'しようとしましたか? – zerkms

答えて

16

レデューサーは異なる枚状態オブジェクトのを取得します。

結果のレデューサーはすべての子レデューサーを呼び出し、その結果を1つの状態オブジェクトに集約します。 状態オブジェクトの形状は、渡されたreducersのキーと一致します。

(強調鉱山)

したがって、内部状態オブジェクトが

{ 
    counter: result of passing `state.counter` into counter reducer 
    decrementer: result of passing `state.decrementer` into decrementer reducer 
} 

ようになりこれは、各店舗が独自の動作の両方のフラックスアプリケーションに別の店舗を有することに類似していますグローバルアプリ状態の「ピース」。

あなたが実際にこれらの二つの減速は、状態オブジェクトの同じ部分に仕事をしたいので、それは自分で、ちょうど実装する順番に各減速機に状態を渡す非常に簡単ですが、あなたが実際に、より多くのreduce-reducersような何かをしたいです各減速機からの新しい状態での初期状態を減少させる。実際に

、それはとても簡単ですが、実装はわずか数行です:

export default function reduceReducers(...reducers) { 
    return (previous, current) => 
    reducers.reduce(
     (p, r) => r(p, current), 
     previous 
    ); 
} 

とあなたのrootReducerはあなたがとても近くだ

const rootReducer = reduceReducers(counter, decrementer); 
+0

ありがとう! reduce-reducerは大きなヒントです。私は最終的に自分の状態が実際には 'state = {counter:{count:0}、decrementer:{count}}} – tells

6

だろう!キャッチは、combineReducersを使用すると、実際には "状態"を分割して、あなたがフィードインしたレデューサーの状態が "state"オブジェクトのプロパティであるということです。 let store = createStore(rootReducer, {counter: {count: 0}, decrementer: {count:0}});

関連する問題