React Redux: Komponente nicht nach der Verbindung zu Redux aktualisiert

Question

Die Frage scheint redundant, aber meine Komponente scheint nicht zu aktualisieren, nachdem mapStateToProps aufgerufen wird. Unten ist ein Stück Code, den ich in meine Home-Komponente geschrieben habe (ofc außerhalb der Klassendeklaration).

Alles funktioniert gut, aber die Änderungen an Requisiten löst keine Aktualisierung in meiner Komponente.

PS: Ich habe überprüft, ob irgendwelche Zustands Mutationen stattfinden, aber nein es din't. Ich neu erstellt einen neuen Zustand wie

case RECEIVE_TICKETS : 
     return Object.assign({},state,{ 
     isLoading: false, 
     chunkedData: action.data.extractChunkedData(), 
     completeData: action.data.getCompleteData(), 
     }); 

EDIT: Das Problem sortiert. Albern mich auf Updates zu prüfen innerhalb componentWillMount statt componentWillReceiveProps

Answer 1

Sie Ihre mapStateToProps prägnanter wie so schreiben kann:

function mapStateToProps(state) { 
    const { isLoading, chunkedData } = state.tickets; 
    return { 
    loading: isLoading, 
    ticketsModel: chunkedData 
    }; 
} 
export default connect(mapStateToProps)(Home); 

Nachdem bei Ihrer mapStateToProps Funktion suchen, und der Redux-Logger, Ihr Problem ist sehr wahrscheinlich, in der Komponente selbst. Wenn Sie in Ihrer Komponente this.props.loading rendern würden, sollten Sie true und dann false sehen.

Auch sehe ich, dass Sie keinen Ausgangszustand auf Ihrem Array chunkedData haben. Wenn Sie den Anfangszustand des Objekts tickets festlegen, sollten Sie das auf ein leeres Array festlegen.

So ersten Zeilen Ihrer Minderer sollte wie folgt aussehen:

const tickets = (
    state = { 
    isLoading: false, 
    chunkedData: [], 
    // Need more info to know what would go in this object 
    completeData: {} 
    }, 
    action 
) => { 

Sehen Sie, wenn Sie die Requisiten in der Methode componentWillReceiveProps Lebenszyklus ändern zu sehen. Sie sollten console.log() the nextProps, die sich ändern, wenn sich die Requisiten ändern.

mehr über Lifecycle-Methoden Lesen Sie hier: http://busypeoples.github.io/post/react-component-lifecycle/