돌아 오는 관계, mapDispatchToProps

Question

내가 Presentational and Container Components 및

Smart and Dumb Components in React 그리고 개념 읽어

:

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

을하지만 그것은 I를 의미 mapDispatchToProps 및 mapDispatchToProps

인가 언급하지 않았다 컨테이너에서 state 및 action을 얻어야하며 구성 요소에 mapDispatchToProps 및 mapDispatchToProps을 사용하지 마십시오.
mapDispatchToProps을 사용할 수는 있지만 구성 요소에는 mapDispatchToProps을 사용하지 마십시오.

나는이 구성 요소,

Answer 1

는 표현 적 요소가 일을보고 가게에 연결되지 방법을 정의 컨테이너 개념에 대해 혼란을 느꼈다. 여기 표상/벙어리 구성 요소의 예는 다음과 같습니다

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

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

export default TodoList 

컨테이너는 사물이 작동하는 방법을 정의하고 구성 요소의 종류에 DOM 마크 업 또는 스타일을 넣으면 안됩니다. 저장소에 연결되어 있으며 Presentational/Dumb 구성 요소에만 데이터를 제공합니다.

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 

그래서, 귀하의 질문에 대답하기 위해, 당신이 표상/벙어리 구성 요소 mapStateToProps 및 mapDispatchToProps을 사용하지 않아야합니다 : 여기에 컨테이너/스마트 구성 요소의 예입니다.

Answer 2

이이 대답은 정말 나를 위해 감사 아이디어를 명확히 REDUX https://medium.freecodecamp.com/why-redux-makes-sense-to-me-and-how-i-conceptualize-it-c8a3a9db15ca#.5na6nr60l