私のレデューサーが自分の店を更新していないのはなぜですか？

Question

私はreduxには新しく、私はただreduxアプリケーションを作成しようとしています。私が持っている問題は、私のレデューサーが私の店を更新しないということです。私がレデューサーの店を突然変異させると、私の変化が見えます。私はそれが悪い習慣であることを知っているので、私はそれを変更せずに更新しようとしていますが、私はコンソールを見ています。私は国家に何の変化も見ない。減速機が店を更新していない理由を誰かが理解できますか？

これは私の行動である：ここでは

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

は私の減速である：

以下

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

は（私は2つが同じことをやって作成した）私のディスパッチャの例である：

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

Answer 1

あなたが実際にaction.fruits.map()の結果を返すわけではないということが、私が見る1つの問題です。矢印関数を使用すると中括弧を使用しない場合はreturnキーワードを省略できますが、curliesを追加すると、通常のように関数の本体が開始されます。明示的に何かを返すのはあなた次第です。

また、文体ノートとして、私は別の変数としてその減速のための初期状態を定義することをお勧めしたい：

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 
) 

それはあなたの問題ではないかもしれないが、それはあなたの説明の症状を引き起こす可能性があります一つのことです。