Pourquoi mon réducteur ne met-il pas à jour mon magasin?

Question

Je suis nouveau à redux et j'essaie de créer une application uniquement redux. Le problème que j'ai est que mon réducteur ne mettra pas à jour mon magasin. Si je devais muter le magasin dans le réducteur alors je verrais mon changement. Je sais que c'est une mauvaise pratique, alors j'essaie de le mettre à jour sans le faire muter, mais quand je regarde la console. Je ne vois aucun changement à l'état. Quelqu'un peut-il m'aider à comprendre pourquoi le réducteur ne met pas à jour le magasin?

C'est mon action:

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

Voici mon réducteur:

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

Voici un exemple de mes dispatchers (j'ai créé deux faire la même chose):

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

Answer 1

Un problème que je vois est que vous ne renvoyez pas le résultat de action.fruits.map(). Les fonctions Flèche vous permettent d'omettre le mot-clé return si vous n'utilisez pas d'accolades, mais une fois que vous avez ajouté des curlies, vous avez démarré le corps d'une fonction comme d'habitude, et c'est à vous de retourner explicitement quelque chose.

En outre, comme une note stylistique, je vous suggère de définir l'état initial de ce réducteur comme une variable distincte:

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

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

Il ressemble à votre logique de mise à jour imbriquée est sur la bonne voie, mais vous pouvez Je souhaite également parcourir la section Structuring Reducers - Immutable Update Patterns des documents Redux.

Answer 2

J'ai trouvé que ce peut se produire par la façon dont vous composez votre middleware. Par exemple, j'avais précédemment:

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

Cependant, il semble que la double appliquer middleware fait Redux grincheux, et il ne serait pas prendre de nouvelles mises à jour de l'état de la rootReducer, juste le epicMiddleware (ce qui est une chose de fantaisie pour déclencher des actions/réducteurs d'effets secondaires).

Déplacer mon epicMiddleware dans mon appel applyMiddleware(...middleware) a résolu les problèmes. Autrement dit, la mise à jour qui suit travaillé:

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

Il ne peut pas être votre problème, mais il est une chose qui peut causer le symptôme décrit.