Was die Verwendung von @connect Dekorateur in reagieren-redux

Question

Ich lerne Reagieren und nach ein paar Tutorials, ich kam in diesem Code ist:

import React     from 'react'; 
import TodosView    from 'components/TodosView'; 
import TodosForm    from 'components/TodosForm'; 
import { bindActionCreators } from 'redux'; 
import * as TodoActions  from 'actions/TodoActions'; 
import { connect }   from 'react-redux'; 

@connect(state => ({ todos: state.todos })) 

export default class Home extends React.Component { 
    render() { 
    const { todos, dispatch } = this.props; 

    return (
     <div id="todo-list"> 
     <TodosView todos={todos} 
      {...bindActionCreators(TodoActions, dispatch)} /> 

     <TodosForm 
      {...bindActionCreators(TodoActions, dispatch)} /> 
     </div> 
    ); 
    } 
} 

Dies ist eine ToDo-Anwendung und das ist die Hauptseite, es lädt 2 weitere kleine components. Ich verstand fast alles, aber ich konnte nicht wenige Dinge bekommen:

• Was macht ? Ich weiß, dass du 4 Params bestehen musst (ich konnte nicht genau herausfinden, was diese 4 Variablen sind).
• Wie ist die Implementierung von @connect Dekorateur, wie der Code nach dem transpilieren aussehen wird?

Vielen Dank im Voraus :)

Answer 1

Redux hält Zustand Ihrer Anwendung in einem einzigen Objekt der Laden genannt. connect ermöglicht es Ihnen, Ihre React-Komponenten mit dem Status Ihres Geschäfts zu verbinden, damit Sie den Status Ihres Geschäfts als props übergeben können.

Ohne die Dekorateur Syntax, Export Ihrer Komponente würde aussehen wie

export default connect(state => ({todos: state.todos}))(Home); 

Was sie tut, ist, dass es Ihre Komponente nimmt (hier Home) und gibt eine neue Komponente, die richtig mit dem Speicher verbunden ist.

Verbunden hier bedeutet: Sie erhalten den Status des Geschäfts als props, und wenn dieser Status aktualisiert wird, erhält diese neue verbundene Komponente die neuen Requisiten. Verbunden bedeutet auch, dass Sie Zugriff auf die Funktion dispatch des Geschäfts haben, mit der Sie den Status des Geschäfts ändern können.

Die vier Argumente sind:

• mapStateToProps Sie wollen wahrscheinlich nicht alle Zustand Ihres Shops in allen angeschlossenen Komponenten zu injizieren. Mit dieser Funktion können Sie definieren, an welchen Statusabschnitten Sie interessiert sind, oder als neue Daten, die aus dem Status des Geschäfts stammen, an props übergeben. Man könnte so etwas wie state => ({todosCount: state.todos.length}) tun und die Home Komponente würde die todosCount prop

• mapDispatchToProps macht das gleiche für die Dispatch-Funktion erhalten. Sie könnte etwas tun, wie dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})

• mergeProps Sie eine benutzerdefinierte Funktion zu definieren, erlaubt es, die Requisiten Ihre Komponente erhält fusionieren, diejenigen von mapStateToProps und die, die kommen aus mapDispatchToProps

• Optionen gut kommt, einige Optionen ...