reactjs Präsentation comopnent nicht neu Rendern auf redux Zustandswechsel

Question

Situation Ich habe eine reactjs App mit Redux. Ich habe einen Container und eine Präsentationskomponente. Meine Darstellungskomponente rendert ein Formular mit einem Array von einfachen Texteingabefeldern, und ich übergebe eine Callback-Funktion 'onChange' vom Container an die Präsentationskomponente, die eine Aktion zur Änderung des Redux-Status bei Eingabe eines der Textfelder absetzt .

Problem Die Präsentationskomponente macht erfolgreich die richtigen Werte für die Textfelder von redux Zustand, wenn die Halterungen Präsentationskomponente, aber nicht aktualisiert, wenn ich in den Feldern eingeben. Wenn ich die Requisiten, die an die Präsentationskomponente in mapStateToProps in dem Container übergeben werden, protokolliere, kann ich sehen, dass die OnChange-Funktion ordnungsgemäß in dem Speicher ausgeführt wird, und der Redux-Status wird korrekt aktualisiert. Die Präsentationskomponente wird jedoch in diesem Fall nicht erneut gerendert. Wenn Sie also das Textfeld eingeben, wird die Ansicht nicht aktualisiert (die Eingabe macht nichts).

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) 

Formular Minderer

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

Aktionen

import * as types from './actionTypes' 

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

Answer 1

Wie in den Kommentaren diskutiert, ist dieser ist aufgrund von Mutation.

Versuchen Sie, Minderer Code wie folgt ändern: elegant

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

oder mehr:

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