[reactjs] mapDispatchToProps 란 무엇입니까?

왜 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
)

당신이 볼 수 있을지는의 지금, 궁금해 container 1 REDUX 파견 및 저장 및 상태와 … 물건에 대해 알고있다.

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

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

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

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

왜 그들이 두 개의 매핑 함수로 나누려고했는지 모르겠습니다 mapToProps(state, dispatch, props) .

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

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

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

답변

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

this.props.onTodoClick(id);

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

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) 

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);

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())
      }
    }
}