Redux-Status nicht mit JavaScript-Objekt aktualisieren

Question

Ich habe diesen Container und Komponente und das Objekt yeast, dass ich versuche, in meinem Geschäft zu setzen. Es funktioniert jedoch nicht, wenn ich es versuche und es speichere. Das Objekt sieht wie folgt aus

{ yeastType : value, temp: value}

Container.js

const mapDispatchToProps = (dispatch) => { 
    return { 
     handleYeastChange: (yeast) => { 
      dispatch(actions.updateYeast(yeast)) 
     } 
    } 
}; 

const RecipeYeastContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(RecipeYeast); 

Component.js

updateYeastState = (updatedYeast) => { 
    this.props.handleYeastChange(updatedYeast) 
}; 

ich keine Fehler in der Konsole oder etwas haben. Wenn ich meine Redux-Dev-Tools öffne, sagt es mir, dass der Status bereits aktualisiert wurde, wenn die Aktion aufgerufen wird. Und damit immer nur den ersten Buchstaben, der in mein Feld eingegeben wird. Es besteht nie darauf. Es ist wirklich komisch. Es wird auch nie in der Benutzeroberfläche angezeigt. Ich kann so viel tippen, wie ich möchte, und sehe, wie die Aktion ausgelöst wird und der Zustand den ersten Buchstaben behält, aber nicht in der Eingabe erscheint.

Was komisch ist, dass wenn ich den Code in yeastType und temp an die Eigenschaft Funktion übergeben und das Objekt darin erstellen, funktioniert es. (Siehe unten)

Dies funktioniert: Container.js

const mapDispatchToProps = (dispatch) => { 
    return { 
     handleYeastChange: (yeastType, temp) => { 
      const yeast = {yeastType, temp} 
      dispatch(actions.updateYeast(yeast)) 
     } 
    } 
}; 

Component.js

updateYeastState = (updatedYeast) => { 
    this.props.handleYeastChange(updatedYeast.yeastType, updatedYeast.temp) 
}; 

ich kann nicht herausfinden, warum dies geschieht. Ich dachte, ich könnte das Objekt einfach durchreichen und muss es nicht rekonstruieren.

Answer 1

Versenden Sie Ihre action richtig? Und bei der Verwendung von redux aktualisieren Sie nicht den Status der Komponente, Sie aktualisieren die store und dann der Wert in der Komponente ist von Ihrer mapStateToProps Funktion, die von der store erhalten. Sagen Sie es, Sie aktualisieren Ihre store mit dem Objekt namens yourReducer speichern. ex:

Container.js:

const mapStateToProps = (state) => ({ 
    inputValue: state.yourReducer.value 
}) 
const mapDispatchToProps = (dispatch) => ({ 
    inputHandler: (e) => { 
    dispatch(yourAction({type: 'CHANGE_INPUT', value: e.target.value})) 
    // The store catches the action and pass to the reducer that can read the action's type 
    // in `yourReducer` will catch the 'CHANGE_INPUT' type and 
    // return a new value as same as the value that passed from the action 
    } 
}) 
export default connect(mapStateToProps)(Component) 

Component.js

export default class Component extends React.Component { 
    { your custom function here ... } 

    render() { 
    const { inputValue, inputHandler } = this.props 
    return (
     <div> 
     {/* The input will be the same as the inputValue changed */} 
     <input value={inputValue} onChange={inputHandler} /> 
     </div> 
    ) 
    } 
} 

Für redux Debuggen Sie dieses redux-devtool versuchen.