Reduxの状態を正しく更新する方法がわかりません

Question

reduxでstateを正しく更新する方法がわかりません。私は重複したエントリーを得る。私の減速の1

export default function reducer(state = STATE, action) { 
    switch (action.type) { 
     case type.WINDOW_ONE: { 
      return { 
       ...state, 
       windowOne: { 
        ...state.windowOne, 
        foo: action.bar, 
       } 
      } 
     } 
    } 
} 

あるstateが

const STATE = { 
    windowOne: { ... } 
    windwoTwo: { ... } 
    windowThree: { ... } 
} 

どのように見えるか

ザッツ私は私のコンポーネント

function mapDispatchToProps(dispatch) { 
    return bindActionCreators(combinedActions, dispatch); 
} 

const mapStateToProps = state => { 
    const { windowOne } = state.windowOne; 

    return { 
     windowOne, 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent); 

そして私の小道具に似状態をマップここに様々な減速機を組み合わせる

redux-loggerを使用すると、windowOneにはstateの全体がコピーされています。そこで、actionをトリガーした後、windowTwoとwindowThreeが見つかりました。また、私はないconst { windowOne } = stateは十分なはずこれらの行

const { windowOne } = state.windowOne; 

でwindowOneを指定する必要がなぜわかりませんか？それは関連するかもしれません...

Answer 1

combineReducersのdocsを確認してください。それぞれの減速機に状態の適切なスライスを送信し、結果をマージします。この後

export default function reducer(state = STATE.windowOne, action) { 
    switch (action.type) { 
     case type.WINDOW_ONE: { 
      return { 
       ...state, 
       foo: action.bar, 
      } 
     } 
    } 
} 

、const { windowOne } = stateをmapStateToPropsで作業する必要があります示した減速機の場合、これはあなただけwindowOneのためにそれを初期状態に合格し、windowOneのためだけで更新された状態を返すべきであることを意味します。すべてのレデューサーがすべてのアクションを受け取り、STATEという名前は、より適切にはinitialStateと命名される可能性があるため、各レデューサーにデフォルトのケースが必要であることにも注意してください。