Redux Beziehung zwischen Komponente, Container- und mapDispatchToProps, mapDispatchToProps

Question

Ich las Presentational and Container Components und Smart and Dumb Components in React

Und das Konzept:

components for “dumb” React components ; 
containers for “smart” React components ; 

Aber sie erwähnte nicht die mapDispatchToProps und mapDispatchToProps

Ist es bedeutet, dass ich sollte state und action aus dem Container bekommen und nicht mapDispatchToProps und mapDispatchToProps in Komponenten verwenden ???
Oder bedeutet, ich kann mapDispatchToProps verwenden, aber nicht mapDispatchToProps in Komponenten verwenden ???

fühlte ich mich zu dieser Komponente, Container-Konzept

Answer 1

Eine Präsentationskomponente definiert verwirrt wie die Dinge aussehen und nicht in den Laden angeschlossen werden soll. Hier ist ein Beispiel für eine Präsentations/Dumb Komponente:

import React from "react" 
import styles from "./styles.css" 

const TodoList = ({ todos, removeTodo }) => (
    <div className={ styles.todoList }> 
    { ... } 
    </div> 
) 

export default TodoList 

Ein Container definiert, wie die Dinge funktionieren, und Sie sollten nicht DOM-Markup oder Stile in dieser Art von Komponente setzen. Es ist mit dem Store verbunden und stellt nur Daten für Presentational/Dumb-Komponenten bereit. Hier ist ein Beispiel eines Containers/Smart-Komponente:

import { connect } from "react-redux" 
import { removeTodo } from "actions/todos" 
import TodoList from "components/TodoList" 

const mapStateToProps = (state) => ({ 
    todos: state.todos, 
}) 

const mapDispatchToProps = (dispatch) => ({ 
    removeTodo(todoId) { 
    dispatch(removeTodo(todoId)) 
    }, 
}) 

const TodoListContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TodoList) 

export default TodoListContainer 

Also, Ihre Frage zu beantworten, können Sie nicht mapStateToProps und mapDispatchToProps in Präsentations/Dumb Komponenten verwenden sollten.

Answer 2

Dies ist schöner Artikel auf redux https://medium.freecodecamp.com/why-redux-makes-sense-to-me-and-how-i-conceptualize-it-c8a3a9db15ca#.5na6nr60l