チェックボックス付きのReact/Reduxコンポーネントはチェックボックスをクリックしても更新されません

Question

私のコンポーネントにはチェックボックスがあります。私がそれらをクリックすると、redux状態で選択されたチェックボックスを保存し、選択されたチェックボックスがチェックされた状態で表示されるようにコンポーネントを更新します。 は、これが私のコンポーネントです：

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import {selectIngredient} from '../actions'; 
class Ingredient extends Component { 
    constructor(props) { 
     super(props) 
     this.isSelected = this.isSelected.bind(this); 
     this.handleCheckbox = this.handleCheckbox.bind(this); 

    } 


    handleCheckbox(e) { 
     const value=e.target.value; 
     this.props.selectIngredient(value); 
    } 


    isSelected(id) { 
     return (this.props.selectedIngredients.indexOf(id) > -1) 
    } 

    render() { 
     return (
      <div className="container"> 
       <div className="form-check checkbox"> 
        <label className="form-check-label"> 
         <input checked={this.isSelected(1)} 
           className="form-check-input" 
           onClick={this.handleCheckbox} 
           type="checkbox" value="1" /> 
         1 
        </label> 

       </div> 
       <div className="form-check checkbox"> 
        <label className="form-check-label"> 
         <input checked={this.isSelected(2)} 
           className="form-check-input" 
           onClick={this.handleCheckbox} 
           type="checkbox" value="2" /> 
         2 
        </label> 

       </div> 
       <div className="form-check checkbox"> 
        <label className="form-check-label"> 
         <input checked={this.isSelected(3)} 
           className="form-check-input" 
           onClick={this.handleCheckbox} 
           type="checkbox" value="3" /> 
         3 
        </label> 

       </div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state, ownProps){ 
    const {selectedIngredients} = state; 
    return {selectedIngredients} 

} 

export default connect(mapStateToProps,{selectIngredient})(Ingredient); 

そして、これは

import {SELECT_INGREDIENT} from "../constants"; 

export function selectIngredient(selected){ 
    const action = { 
     type: SELECT_INGREDIENT, 
     selected 
    } 
    return action; 
} 

アクション/ index.jsであり、ここで減速です：私は、チェックボックスをクリックすると

import {SELECT_INGREDIENT} from "../constants"; 

export default (state={selectedIngredients:[]}, action)=>{ 
    let stateBefore = Object.assign({},state); 
    switch(action.type){ 
     case SELECT_INGREDIENT: 
      const {selected} = action; 
      stateBefore['selectedIngredients'].push(+selected); 
      return stateBefore 

     default: 
      return state; 
    } 

} 

は何も、変わらない彼ら空にしなさい。コンポーネントが更新されていません。しかし、還元状態はその状態を更新する。 還元状態が更新されているので、コンポーネントとそのチェックボックスを更新する必要があります。違いますか？

この作業を行う方法を理解してください。 {selectedIngredients、...状態：[... state.selectedIngredients、action.selected]}あなたの減速リターンで

：

---

以下のコメントで与えられた答えをありがとう

Answer 1

これは突然変異である：

let stateBefore = Object.assign({},state); 
    ... 
     stateBefore['selectedIngredients'].push(+selected); 

状態オブジェクトを浅くコピーしていますが、依然として 選択されたインジケータが変更されています。既存のselectedIngredientsオブジェクトを依然として変更しているので、 です。

次の問題への最初の答えをチェックしhttps://github.com/reactjs/redux/issues/1769

使用対象の広がり演算子：

case SELECT_INGREDIENT: 
    return { 
    ...state, 
    selectedIngredients: [...state.selectedIngredients, action.selected], 
    }