入力と反応の還元状態を更新

Question

私のアプリケーションで私は人のデータを表示しています。 私は新しい人を入力できるシナリオを持っています。これまでのところ、私はこれを持っている： レデューサー：

export default function (state = [], action) { 
    console.log("Reducing"); 
    switch (action.type) { 
     case 'ADD': 
      console.log("ADDING!"); 
      return action.payload; 
      break; 
    } 
    return state; 
} 

処置：

export const addPerson = (person) => { 
    console.log("addPerson Action Fired! ", person); 
    return { 
     type: 'ADD', 
     payload: person 
    } 
}; 

私は自分のアプリケーションに表示していますいくつかの人のデータと減速機を持っていますが、私は追加のこの時点でブロックされています新しい人。これまでのところ私はコンソールログで自分の入力を見ることができますが、どのように私は状態にそれを追加することができないのか分かりません。 ヘルプをいただければ幸いです。

これは私がデータを表示しているレデューサーです。

export default function() { 
    return ["abc","def","ghi","jkl"] 
} 

私は配列からこれらの要素のリストを表示しています（それぞれ1人です）。 1つ追加すると、これらの人物が追加され、更新されたリストが表示されます。

Answer 1

あなたの減速で、次の実行する必要があります。

export default function (state = [], action) { 
    console.log("Reducing"); 
    switch (action.type) { 
     case 'ADD': 
     return [ 
      ...state, 
      action.payload, 
     ] 
    } 
    return state; 
} 

をこの方法では、あなたの既存のアレイに人を追加します。それ以外の場合は、現在のstateの値を配列からオブジェクトに変更します。

---

のは、あなたの人物オブジェクトの値は、次のされて考えてみましょう、あなたはそれをディスパッチ：修正で

// First step 
return action.payload; 

// Second step 
return { id: 1, name: 'John Doe' }; 

：

{ 
    type: 'ADD', 
    payload: { 
    id: 1, 
    name: 'John Doe', 
    } 
} 

以前のコードを使用すると、現在の値を持っているでしょうコード：

// First step 
return [ 
    ...state, 
    action.payload, 
] 

// Second step 
return [ 
    ...[], 
    { id: 1, name: 'John Doe' }, 
] 

// Third step 
return [{ id: 1, name: 'John Doe' }];