更新Reduxストア

Question

reduxストアを更新しようとしていますが、ポイントとsessionIdの両方にアクセスしようとすると、未定義に戻ります。私は減速機に問題があると確信していますが、私はそれを理解することはできません。どんな助けでも大歓迎です。ここで

は私の減速だ：

import { UPDATE_POINTS, SET_SESSION } from '../path' 

const initialState = { 
    sessionId: null, 
    points: [] 
} 

export default (state = initialState, action) => { 
    switch (action.type) { 
     case UPDATE_POINTS: 
      return { 
       points: action.points 
      } 
     case SET_SESSION: 
      return { 
       sessionId: action.session 
      } 
     default: 
      return state; 
    } 
} 

編集：

アクションクリエーター

export function updatePoints(points){ 
    return { 
     type: UPDATE_POINTS, 
     points 
    } 
} 

export function setSession(session){ 
    return { 
     type: SET_SESSION, 
     session 
    } 
} 

は内のコンポーネント（単純化のために、私は、この機能のうち、他のほとんどすべてのものを取った）

に反応します

handleSelect(e) { 
    this.props.setSession(e); 
    console.log(this.props.sessionId); 
} 

この機能は、メニュー項目がドロップダウンメニューから選択された場合に使用されます。最初の選択時には、sessionIdの初期状態にあるものがコンソールに表示されます。それ以上ドロップダウンを選択すると、コンソールに未定義となります。

Answer 1

あなたはスーパークローズです。 reduxの還元剤は、州全体の新しいコピーを返す必要があります。あなたのレデューサーはそれが懸念しているキーだけを返しています。それはもう一方のキーをドロップすることになります。あなたはあなたのキーが更新された状態の新しいコピーを返す必要があります。たとえば、次のように

const initialState = { 
    sessionId: null, 
    points: [] 
} 

export default (state = initialState, action = null) => { 
    // Exit early if you don't have an action (returning old state) 
    if (!action) return state; 

    // This function will assign your patch onto the old state, and then 
    // assign all of that onto a NEW object. For redux to do it's job, 
    // you can't modulate the old object, you have to return a new one. 
    const update = patch => Object.assign({}, state, patch); 

    switch (action.type) { 
    case UPDATE_POINTS: 
     return update({ 
     points: action.points 
     }); 

    case SET_SESSION: 
     return update({ 
     sessionId: action.session 
     }); 

    default: 
     return state; 
    } 
} 

そして、あなたはdataキーの下にペイロードを置けば、レコードのため、代わりに独自のキーの下にあなたの行動のクリエイターの各時間をあなたのデータペイロードを置くこと、そしてあなたの行動は、標準的なフラックスのアクションに従いますフォーマット。

export const updatePoints = (points) => ({ 
    type: UPDATE_POINTS, 
    data: points 
}); 

export const setSession = (session) => ({ 
    type: SET_SESSION, 
    data: session 
}); 

あなたは行っています。幸運にも、もしあなたが立ち往生したら、Reduxのドキュメントを参照してください（彼らは本当に良いです）。 Link to Redux Docs