mapDispatchToProps 란 무엇입니까?

mapDispatchToProps 란 무엇입니까?

---

Redux 라이브러리에 대한 설명서를 읽었으며 다음 예제가 있습니다.

상태를 읽는 것 외에도 컨테이너 구성 요소는 작업을 전달할 수 있습니다. 비슷한 방식으로, 메소드 mapDispatchToProps()를 수신 dispatch()하고 프리젠 테이션 컴포넌트에 삽입하려는 콜백 소품을 리턴 하는 함수를 정의 할 수 있습니다 .

이것은 실제로 의미가 없습니다. mapDispatchToProps이미 가지고있을 때 왜 필요한 mapStateToProps가요?

또한이 편리한 코드 샘플을 제공합니다.

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

누군가이 기능이 무엇이며 왜 유용한 지 평신도의 용어로 설명해 주시겠습니까?

---

왜 mapDispatchToProps유용한 정보 가 결정화되지 않은 것 같습니다 .

이것은 실제로 container-component패턴 의 맥락에서만 대답 할 수 있습니다. 먼저 컨테이너 구성 요소 를 사용한 다음 React와 함께 사용하여 가장 잘 이해했습니다 .

간단히 말해서, 당신 components은 물건을 표시하는 것에 만 관심이 있어야합니다. 들이 정보를 얻기 위해 가정되는 유일한 장소는 소품이다 .

"재료 표시"(구성 요소)와 분리 된 내용은 다음과 같습니다.

• 물건을 표시하는 방법,
• 이벤트 처리 방법

그게 다야 containers.

따라서 component패턴 의 "잘 설계된" 은 다음과 같습니다.

class FancyAlerter extends Component {
    sendAlert = () => {
        this.props.sendTheAlert()
    }

    render() {
        <div>
          <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
          <Button onClick={sendAlert}/>
        </div>
     }
}

이 구성 요소가 props (을 통해 redux store에서 가져온)에서 표시하는 정보를 가져 오는 방법 mapStateToProps과 props에서 조치 기능을 가져 오는 방법을 참조하십시오 sendTheAlert().

그 위치 mapDispatchToProps는 다음과 같습니다.container

// FancyButtonContainer.js

function mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })
}

function mapStateToProps(state) {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}

export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter
)

당신이 볼 수 있는지 궁금합니다. 이제 redux 및 dispatch 및 store 및 state 및 ...에 대해 아는 것이 container 1 입니다.

는 component패턴에서 FancyAlerter, 렌더링은 그 물건의에 대해 알 필요가 없다 않는 : 그것은에서 호출의 방법을 얻을 수 onClick의 소품을 통해 버튼의.

그리고 ... mapDispatchToPropsredux가 컨테이너가 그 기능을 소품의 포장 된 구성 요소로 쉽게 전달할 수 있도록하는 유용한 수단이었습니다.

이 모든 것은 문서의 todo 예제와 비슷하며 여기에 또 다른 대답이 있지만 패턴을 고려하여 이유 를 강조하려고 시도했습니다 .

(참고 : 내부에 액세스 할 수없는 기본적인 이유 mapStateToProps와 동일한 목적으로 사용할 수 없으므로 래핑 된 구성 요소에 사용하는 메서드를 제공하는 데 사용할 수 없습니다 .mapDispatchToPropsdispatchmapStateToPropmapStateToPropsdispatch

왜 그들이 두 개의 매핑 함수로 나누기를 선택했는지 모르겠습니다. mapToProps(state, dispatch, props)IE 두 가지 기능을 모두 수행하는 것이 더 어려울 수 있습니다 !

---

1 컨테이너 FancyButtonContainer를 "사물"로 강조하기 위해 의도적으로 명시 적으로 컨테이너 이름을 지정했습니다 .

export default connect(...) ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

대부분의 예제에 표시되는 구문

---

기본적으로 속기입니다. 따라서 글을 쓰는 대신

this.props.dispatch(toggleTodo(id));

예제 코드에 표시된대로 mapDispatchToProps를 사용하고 다음과 같이 작성하십시오.

this.props.onTodoClick(id);

또는이 경우 이벤트 핸들러로 사용합니다.

<MyComponent onClick={this.props.onTodoClick} />

---

Dan Abramov의 도움이되는 비디오가 여기 있습니다 : https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

---

mapStateToProps()구성 요소가 다른 일부 구성 요소에 의해 업데이트되는 상태를 업데이트하는 데 도움
mapDispatchToProps()이되는 유틸리티이며 구성 요소가 작업 이벤트를 발생시키는 데 도움이되는 유틸리티입니다 (응용 프로그램 상태 변경을 유발할 수있는 작업 디스패치)

---

mapStateToProps, mapDispatchToProps과 connect에서 react-redux라이브러리에 액세스 할 수있는 편리한 방법 제공 state및 dispatch상점의 기능을. 따라서 기본적으로 connect는 고차 구성 요소이므로 이것이 의미가 있다면 래퍼로 생각할 수도 있습니다. 따라서 state변경 mapStateToProps될 때마다 새 것으로 호출 state되고 나중에 props구성 요소 를 업데이트하면 렌더링 기능을 실행하여 브라우저에서 구성 요소를 렌더링합니다. mapDispatchToProps또한 props구성 요소 에 키-값을 저장 하며 일반적으로 함수 형태를 취합니다. 같은 방법으로 당신은 실행할 수있는 state구성 요소에서의 변화를 onClick, onChange이벤트를.

문서에서 :

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

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

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

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

또한 React Stateless 기능 및 상위 주문 구성 요소에 익숙해야합니다.

---

mapStateToProps수신 state및 props당신이 구성 요소에 전달할 상태에서 소품을 추출 할 수 있습니다.

mapDispatchToPropsreceive dispatch및 props을 사용하면 액션 작성자가 디스패치하도록 바인딩하여 결과 함수를 실행할 때 액션이 디스패치됩니다.

나는 이것이 당신이 dispatch(actionCreator())당신의 구성 요소 내에서해야 할 일을 덜어 주므로 조금 더 읽기 쉽습니다.

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments

---

이제 다음과 같이 redux에 대한 조치가 있다고 가정하십시오.

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

가져 오면

import {addTodo} from './actions';

class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.onTodoClick(); // This prop acts as key to callback prop for mapDispatchToProps
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

const mapDispatchToProps = dispatch => {
    return {
      onTodoClick: () => { // handles onTodoClick prop's call here
        dispatch(addTodo())
      }
    }
}

export default connect(
    null,
    mapDispatchToProps
)(Greeting);

함수 이름에서 알 수 있듯이 액션을 props (컴포넌트의 props)에 mapDispatchToProps()매핑dispatch

따라서 prop onTodoClick은 mapDispatchToPropsaction을 파견하기 위해 위임 하는 기능 의 열쇠 addTodo입니다.

또한 코드를 자르고 수동 구현을 우회하려면이 작업을 수행 할 수 있습니다.

import {addTodo} from './actions';
class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.addTodo();
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

export default connect(
    null,
    {addTodo}
)(Greeting);

정확히 의미하는 것은

const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }
}

참고 URL : https://stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops