Redux에서 배열 상태 지우기

Question

Redux에서 배열 상태를 지우려면 어떻게합니까? 빈 배열의 초기 상태가 있고 사물이 추가되고 있습니다. 나는 단지 분명히, 나는 다음과 같은 방법을 시도하는 작업을 갖고 싶어하지만 "action.payload"나는 CLEAR_THINGS 조치에 제공 대해 말해 "예기치 않은 토큰"오류가 있습니다 :

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return { 
      ...state, 
      action.payload // payload here is []... 
     }; 
    default: 
     return state; 
}} 

그것은 또한 던져 action.payload 대신 []를 사용하면 오류가 발생합니다.

Answer 1

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return []; 
    default: 
     return state; 
}} 

RECEIVE_THING 조치가 배열 된 상태를 반환하는 객체의 확산 표기법을 사용 ([]) 새 항목을 이전 상태 ([...state])를 포함하고에 추가하는 ([...state, action.payload]). 이 새 항목에 사용되는 키/속성 이름은 단순히 배열의 다음 색인입니다. 그것은 결국 배열입니다. CLEAR_THINGS에 대한 코드에서

당신이 이전 상태를 포함하는 객체 ({})를 만드는 (이 ['item1']이었다라고) 등이 { '0': ['item1'] } 것 같습니다. 다음으로 object shorthand notation을 사용하여 더 많은 상태를 추가 할 수 있지만 단일 식별자 (한 단어)를 사용해야하지만 점으로 구분 된 개념 (한정 식별자)을 사용하여 속성에 액세스해야합니다. 당신은 action.payload이라는 성직자를 가르치고 있지만, 이것은 불법이며, 이것은 당신의 실수가 어디서 왔는지입니다. 배열의 경우 키가 배열의 인덱스에서 파생되기 때문에이 경우에는 값만 필요하기 때문입니다.

원하는 작업은 항상 같은 종류의 개체 (경우에 따라 배열)를 반환합니다. return {으로 시작하면 이미 잘못된 방향으로 가고 있습니다.

Answer 2

키가 마침표를 포함하고 키가 될해야하는지 불분명하기 때문 귀하의 경우 구문 오류가 발생

{"thing": thing} 

에 작동

{thing} 

transpiles의 ES6 속기. 이런 식으로 할 생각인가?

return { 
    action: { 
     payload: action.payload 
    } 
} 

그러나 이것은 손에서 문제가 해결되지 않습니다이 작업에 배열을 취소하려는 경우, 당신이 다음 상태로 기존 상태를 확장하지 않아야합니다. 대신 당신은 기존 상태와 같은 모양으로 무언가를 반환해야하지만, 의미 상 비어 있음을 의미합니다 (이 경우에는 빈 배열). 나는 당신이 원하는 것은 생각

case "RECEIVE_THING": 
    return [ 
     ...state, 
     action.payload 
    ]; 
case "CLEAR_THINGS": 
    return []; 

Answer 3

그냥 반환해야하고 당신의 "CLEAR_THINGS"핸들러는 하늘의 배열 :

export default (state=[], action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return [ 
      ...state, 
      action.payload 
     ]; 
    case "CLEAR_THINGS": 
     return []; 
    default: 
     return state; 
}} 

그냥 모든 것을 지울 때문에 기존의 상태를 참조 할 수있다 필요가있어, 새 상태를 빈 배열로 설정하기 만하면됩니다.

언급 할 가치가있는 또 다른 점은 객체에 내 배열을 중첩시키는 것입니다. 귀하의 감속기가 앞으로 더 복잡 해지면 필요할 때이 방식으로 기능을 추가하는 것이 어려울 것이며이 방법을 사용하면 앱이 더 복잡해질 수 있습니다. 당연히 감속기를 추가 할 수 있지만이 방법으로 감속기를보다 유연하게 만드는 것이 좋습니다. 이과 같습니다

export default (state = { myArray: [] }, action) => { 
switch (action.type) { 
    case "RECEIVE_THING": 
     return { 
      ...state, 
      myArray: state.myArray.concat([action.payload]), 
     }; 
    case "CLEAR_THINGS": 
     return { 
      ...state, 
      myArray: [], 
     }; 
    default: 
     return state; 
}}