map Dispatch To Props란?

map Dispatch To Props란?

Redux 라이브러리의 메뉴얼을 읽고 있었는데, 다음과 같은 예가 있습니다.

컨테이너 컴포넌트는 상태를 읽을 뿐만 아니라 액션을 디스패치할 수 있습니다.로 '어느 정도 '어느 정도', ' 정도'라는 함수도 할 수 .mapDispatchToProps()를 the the the the the the the dispatch() 및 합니다.

당신은 왜가 필요합니까?mapDispatchToProps 있는 mapStateToProps

또, 다음의 편리한 코드 샘플도 제공합니다.

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

이 기능은 무엇이며 왜 유용한가요?

그 어떤 대답도 왜 그런지는 명확해지지 않은 것 같아mapDispatchToProps도움이 됩니다.

수 .container-component패턴, 첫 번째 읽기에서 가장 잘 이해된 패턴:다음으로 용기 구성 요소를 반응과 함께 사용합니다.

한마디로 말하면components전시에만 신경을 써야 할 것 같아요.그들이 정보를 얻을 수 있는 유일한 장소는 그들의 소품이다.

「표시하는 것」(컴포넌트)과는 별도로, 다음과 같이 되어 있습니다.

• 어떻게 전시할 수 있는지,
• 이벤트를 어떻게 처리하는지 알아야 합니다.

이 바로 게거그 that의 말이다.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>
     }
}

가 소품에서 「」( 「」)을 경유해 취득)으로부터에 대해 합니다.mapStateToProps액션 도 합니다.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명.

component 「」라고 하는 것.FancyAlerter그것도 알 필요가 은, 하고 있습니다.이것은, 다음의 URL 로 호출하는 메서드를 취득합니다.onClick츠키노

★★★★★★★★★★★★★★」mapDispatchToProps용기의 기능을 소품 위에 있는 포장된 부품에 쉽게 전달할 수 있도록 리덕스가 제공하는 유용한 수단이었습니다.

이 모든 것은 문서의 ToDo 예시와 매우 흡사하며, 또 다른 답변도 여기 있습니다. 하지만 저는 그 이유를 강조하기 위해 패턴을 반영하여 캐스팅하려고 노력했습니다.

수 .mapStateToProps mapDispatchToProps 할dispatch에 inside inside inside mapStateToProp 못 못못못못 . . . . . .?mapStateToProps을 dispatch

두 함수를 - 더 하는 이 더 수도 .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의 도움이 되는 비디오가 있습니다.Redux: React Redux (Visible Todo List)의 Connect()를 사용한 컨테이너 생성

mapStateToProps()는 컴포넌트의 상태를 갱신하기 위한 유틸리티입니다(다른 컴포넌트에 의해 갱신됩니다).
mapDispatchToProps()는 컴포넌트가 액션이벤트(어플리케이션 상태 변경을 일으킬 수 있는 액션)를 기동하는 것을 지원하는 유틸리티입니다.

mapStateToProps,mapDispatchToProps and 그리고.connect부에서react-redux라이브러리는 이 브 러 세 리 법 공 한 합제을 your provides library방다니편한위ient way라 access액에 a to기하리스는 conven provides library.state and 그리고.dispatch가게의 기능당신의 가게의 기능을 제공합니다.그래서 기본적으로 연결 구성 요소가 더 높은 주문 구성 요소라고 생각할 수 있습니다.따라서 기본적으로 connect는 고차 컴포넌트입니다.또, 이것이 적절한 경우, 래퍼로서 생각할 수도 있습니다. 매번 의 ★★★★★★★★★★★★★★★★★★★★★★★★★★★.statemapStateToProps새 제품과 함께 호출됩니다.state 후, 「」에 따라서,propsbrowser.update component의 . mapDispatchToProps에는 키 됩니다.props이치노 ""를 트리거할 수 .stateonClick,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) 

또한 상태 비저장 기능 및 상위 구성 요소에 대해 잘 알고 있어야 합니다.

이제 다음과 같이 reduces에 대한 작업이 있다고 가정합니다.

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

Import 할 때

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

이 「」라고 하는 처럼.mapDispatchToProps() , »dispatch

★★onTodoClick입니다.mapDispatchToProps에서 위임하는 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())
      }
    }
}

mapStateToProps을 받다state ★★★★★★★★★★★★★★★★★」props상태로부터 소품을 추출하여 컴포넌트에 전달할 수 있습니다.

mapDispatchToPropsdispatch ★★★★★★★★★★★★★★★★★」props액션 크리에이터를 디스패치에 바인드하기 위한 것으로, 결과 함수를 실행하면 액션이 디스패치 됩니다.

당신이 을 알 수 있습니다.dispatch(actionCreator())컴포넌트에 포함되어 있기 때문에 읽기 쉬워집니다.

리액트 리덕스: connect: 인수

언급URL : https://stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops