입력이있는 reactjs에서 redux 상태 업데이트

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"] 
} 

이제 배열에서 이러한 요소의 목록을 표시합니다 (각 요소는 한 사람입니다). 하나를 추가하면이 사람과 함께 추가되고 업데이트 된 목록이 표시됩니다.

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' }];