감속기 상태를 조치로 업데이트하는 방법은 무엇입니까?

Question

나는 액션 페이로드를 감속기에 전달하고 감속기가 적절한 data을 업데이트하고 전체 상태를 반환하기를 원합니다.

감속기 :

const initialState = { 
    fname: 'FNAME', 
    lname: 'LNAME', 
    data: [] 
} 

const DATA1 = [ 
    {id:1, name:'D1a'}, 
    {id:2, name:'D1b'} 
] 
const DATA2 = [ 
    {id:1, name:'D2a'}, 
    {id:2, name:'D2b'} 
] 

export default function peopleReducer(state=initialState, action){ 

    console.log(action.payload); 
    switch(action.payload){ 
     case "case1": 
     return {...state, DATA1}; // how do I code this? 
     case "case2": 
     return {...state, DATA2}; 
     default: 
     return state 
    } 
} 

가 어떻게이 action.payload에 따라 하나에 state.data를 설정합니까?

case "case1": 
    return { 
     ...state, 
     data: [...state.data, ...DATA1] 
    }; 

을하지만 그것은 데이터를 추가 유지 :

나는 시도했다. 스프레드 연산자 ...DATA1을 사용하고 data[]으로 푸시하기 전에 데이터를 지우고 싶습니다.

Answer 1

이 같은 데이터 속성의 내용을 대체 할 수

return {...state, data: DATA1} 

state 이미 data 속성이 있지만 나중에 발생하는 데이터 속성에 의해 무시됩니다.

Answer 2

페이로드가 아닌 동작 유형을 켜야합니다. 귀하의 경우, 작업 유형은 "사례 1", "사례 2"것 등

당신은 state을 destructuring 새로운 DATA1으로 data 요소를 교체하여 data 요소를 교체 할 수 있습니다.

귀하의 감속기가

export default function peopleReducer(state=initialState, action){ 

    console.log(action.payload); 
    switch(action.type){ 
     case "case1": 
     return {...state, data:DATA1}; 
     case "case2": 
     return {...state, data:DATA2}; 
     default: 
     return state 
    } 
}