reactjsプレゼンテーションcomopnentは還元状態の変更で再レンダリングされません

Question

状況 私はreduxsを使用してreactjsアプリを持っています。私はコンテナとプレゼンテーションコンポーネントを持っています。私のプレゼンテーションコンポーネントは、単純なテキスト入力フィールドの配列でフォームをレンダリングし、コンテナからプレゼンテーションコンポーネントに 'onChange'コールバック関数を渡して、テキストフィールドのいずれかが入力されたときに還元状態を変更するアクションを送出します。

問題 は、プレゼンテーションコンポーネントが正常にReduxの状態からテキストフィールドプレゼンテーションコンポーネントマウント用の正しい値をレンダリングするが、私はフィールドに入力すると更新されません。コンテナのmapStateToPropsのプレゼンテーションコンポーネントに渡されたプロップを記録すると、onChange関数がストアに正しくディスパッチされており、リフィックス状態が正しく更新されていることがわかります。しかし、プレゼンテーションコンポーネントは再レンダリングされませんので、テキストフィールドでの入力はビューを更新しません（何もしません）。

formConnector

import { connect } from 'react-redux' 
    import Form from '../components/Form' 
    import { changeElementValue } from '../actions/actions' 

    const mapStateToProps = (state) => { 
     //e.g. state.elements = [{id:"email", value:"foo@bar.com"}] 
     let props = { 
      elements: state.elements, 
     } 

     //state and props.elements.{id}.value changes successfully when I 
     //type in one of the input fields, but 
     //the the Form component is not re-rendered 
     console.log(props) 

     return props 
    } 

    const mapDispatchToProps = (dispatch) => { 
     return { 
      onElementChange: (id, value) => { 
       dispatch(changeElementValue(id, value)) 
      }, 
     } 
    } 

    export default connect(mapStateToProps, mapDispatchToProps)(Form) 

フォーム減速

function formReducer(state = initialState, action = null) { 
     switch(action.type) { 
      case types.CHANGE_ELEMENT_VALUE: 
       let newState = Object.assign({}, state) 
       newState.elements[action.id].value = action.value 
       return newState 

      default: 
       return state; 
     } 
    } 

アクション

import * as types from './actionTypes' 

    export function changeElementValue(id, value) { 
     return { type: types.CHANGE_ELEMENT_VALUE, id, value } 
    } 

Answer 1

コメントで説明したように、この状態の突然変異によるものです。

は、次のように減速コードを変更してください：

エレガント

case types.CHANGE_ELEMENT_VALUE: { 
    const newElements = state.elements.map(function(el, index) { 
     return action.id === index 
      ? Object.assign({}, el, { value: action.value }) 
      : el; 
    }); 
    return Object.assign({}, state, { elements: newElements); 
} 

以上：

case types.CHANGE_ELEMENT_VALUE: 
    return { ...state, elements: state.elements.map((el, index) => (
     action.id === index ? { ...el, value: action.value } : el 
    )}