내 리 듀서가 내 스토어를 업데이트하지 않는 이유는 무엇입니까?

Question

나는 redux에 새로 왔으며 전적으로 redux 응용 프로그램을 만들려고합니다. 내가 가지고있는 문제는 내 감속기가 내 가게를 업데이트하지 않는다는 것입니다. 나는 감속기에있는 상점을 돌연변이하려는 경우 내 변화를 볼 것입니다. 나는 그것이 나쁜 습관이라는 것을 알고 있습니다. 그래서 그것을 돌연변이시키지 않고 업데이트하려고합니다.하지만 콘솔을 볼 때. 나는 국가에 변화가없는 것을보고있다. 감속기가 상점을 업데이트하지 않는 이유를 알아낼 수 있습니까? 여기

store.subscribe(() => { 
    console.log("store changed", store.getState()); 
}); 

내 감속기입니다 :

이

내 작업입니다

store.dispatch({type: "DEDUCT", payload: [ 
    { 
    "itemName": "banana", 
    "quantityRemaining": 1 
    }, 
    { 
    "itemName": "apple", 
    "quantityRemaining": 1 
    }, 
    { 
    "itemName": "strawberries", 
    "quantityRemaining": 1 
    } 
]}); 

: 아래

const fruitReducer = function(state={ 
    fruits: [ 
    { 
     "itemName": "banana", 
     "price": 1.00, 
     "quantityRemaining": 10 
    }, 
    { 
     "itemName": "apple", 
     "price": 2.00, 
     "quantityRemaining": 5 
    }, 
    { 
     "itemName": "raspberry", 
     "price": 5.00, 
     "quantityRemaining": 2 
    }, 
    { 
     "itemName": "kiwi", 
     "price": 3.00, 
     "quantityRemaining": 15 
    }, 
    { 
     "itemName": "pineapple, 
     "price": 7.00, 
     "quantityRemaining": 1 
    }, 
    { 
     "itemName": "strawberries", 
     "price": 2.00, 
     "quantityRemaining": 3 
    } 
    ] 
}, action){ 
    if(action.type === "DEDUCT"){ 
    return Object.assign({}, state, { 
     fruits: state.fruits.map((fruit, index) => { 
     action.payload.map((actionFruit) => { 
      if(fruit.itemName === actionFruit.itemName){ 
      let newQuantity = fruit.quantityRemaining - actionFruit.quantityRemaining; 
      return Object.assign({}, fruit, { 
       quantityRemaining: newQuantity 
      }); 
      } 
     }); 
     return fruit; 
     }) 
    }); 
    } 
    else 
    return state; 
} 

내 디스패처의 예입니다 (나는 같은 일을하고 두 가지를 만들었습니다)

Answer 1

내가 보는 한 가지 문제점은 실제로 action.fruits.map()의 결과를 반환하지 않는다는 것입니다. 화살표 함수를 사용하면 중괄호를 사용하지 않고 return 키워드를 생략 할 수 있습니다. 단, 중괄호를 추가하면 일반처럼 함수의 본문을 시작하게되고 명시 적으로 반환 할 수 있습니다.

또한, 문체 참고로, 나는 별도의 변수로 그 감속기의 초기 상태를 정의하는 게 좋을 것 : 당신의 중첩 된 업데이트 논리가 올바른 궤도에 같은

const initialState = [ /* fruits here */]; 

const fruitReducer = (state = initialState, action) => { 
    // reducer logic here 
} 

것 같습니다,하지만 당신은 할 수있다 Redux 문서의 Structuring Reducers - Immutable Update Patterns 섹션을 통해 읽고 싶습니다.

Answer 2

이 경우 은이며 미들웨어 작성 방법에 따라 결정됩니다. 이중 적용 미들웨어 REDUX가 심술 만든 것처럼

const store = createStore(
    rootReducer, 
    applyMiddleware(epicMiddleware), 
    composeEnhancers(applyMiddleware(...middleware)) 
) 

그러나, 그것은 것, 그리고 그것은 멋진 일이다 rootReducer, 단지 epicMiddleware (에서 새로운 상태 업데이트를 잡을 것입니다 : 예를 들어, 나는 이전에 있었다 부작용으로부터 행동/감속기를 유발할 수 있음).

내 을 내 applyMiddleware(...middleware)으로 이동하면 문제가 해결되었습니다. 즉, 다음으로 업데이트하면 작동합니다 :

const store = createStore(
    rootReducer, 
    composeEnhancers(applyMiddleware(...middleware)) // epicMiddleware is now in the `middleware` array 
) 

문제가되지는 않지만 설명 된 증상이 발생할 수 있습니다.