Why isn't my reducer updating my store? - redux

Question

I am new to redux and I am trying to create a solely redux app. The problem I am having is that my reducer won't update my store. If I were to mutate the store in the reducer then I would see my change. I know that is bad practice, so I am trying to update it without mutating it, but when I look at the console. I am seeing no change to the state. Can someone help me figure out why the reducer isn't updating the store?
This is my action:
store.subscribe(() => {
console.log("store changed", store.getState());
});
Here is my reducer:
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;
}
Below is an example of my dispatchers(I created two doing the same thing):
store.dispatch({type: "DEDUCT", payload: [
{
"itemName": "banana",
"quantityRemaining": 1
},
{
"itemName": "apple",
"quantityRemaining": 1
},
{
"itemName": "strawberries",
"quantityRemaining": 1
}
]});

Answer 1

One issue I see is that you're not actually returning the result of action.fruits.map(). Arrow functions allow you to omit the return keyword if you don't use curly braces, but once you add curlies, you've started the body of a function just like normal, and it's up to you to explicitly return something.
Also, as a stylistic note, I'd suggest defining the initial state for that reducer as a separate variable:
const initialState = [ /* fruits here */];
const fruitReducer = (state = initialState, action) => {
// reducer logic here
}
It looks like your nested update logic is on the right track, but you may want to read through the Structuring Reducers - Immutable Update Patterns section of the Redux docs as well.

Answer 2

I found that this can happen by the way you compose your middleware. For instance, I previously had:
const store = createStore(
rootReducer,
applyMiddleware(epicMiddleware),
composeEnhancers(applyMiddleware(...middleware))
)
However, it seems as though the double apply middleware made redux grumpy, and it wouldn't catch new state updates from the rootReducer, just the epicMiddleware (which is a fancy thing to trigger actions/reducers from side effects).
Moving my epicMiddleware into my applyMiddleware(...middleware) call resolved the issues. That is, updating to the following worked:
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(...middleware)) // epicMiddleware is now in the `middleware` array
)
It may not be your problem, but it is one thing that can cause your described symptom.