React-Redux에서의 디스패치 기능

React-Redux에서의 디스패치 기능

리액션을 공부하고 있는데 이런 예가 있어요.

//index.js
const store = createStore(reducer)
render(
  <Provider store={store}>
    <AddTodo />
  </Provider>,
  document.getElementById('root')
)

//Apptodo.js
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
    .......

왜 안되지?this.pros.storedispatch() 함수를 호출하기만 하면 됩니다.

편집: 어떻게 추출합니까?dispatch부터this.pros. 그 물건이 아닌가?this.pros.store이 경우엔 그냥 추출해서store?

감사해요.

react-paramx는 이러한 메서드를 소품으로 컴포넌트에 전달하는 라이브러리입니다.

dispatch()는 스토어에 액션을 디스패치하고 상태 변경을 트리거하기 위해 사용되는 메서드입니다.react-paramx는 단순히 사용자가 쉽게 접근할 수 있도록 하기 위한 것입니다.

단, 접속 기능에 액션을 전달하면 소품에서는 디스패치를 사용할 수 없습니다.다시 말해, 아래 코드에서, 내가 지나가고 있기 때문에someAction접속하기 위해서,dispatch()더 이상 소품에서 사용할 수 없습니다.

단, 이 접근방식의 장점은 소품에서 "연결된" 액션을 사용할 수 있게 되어 호출 시 자동으로 발송됩니다.

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { someAction } from '../myActions';

const MyComponent = (props) => {
  // someAction is automatically dispatched for you
  // there is no need to call dispatch(props.someAction());
  props.someAction();
};

export default connect(null, { someAction })(MyComponent);

또는 당신이 제시한 예시와 같이 객체 파괴를 사용한다면...

const MyComponent = ({ someAction }) => {
  someAction();
};

단, 소품에서 사용할 수 있는 커넥티드 액션을 호출해야 합니다.someAction()을 호출하려고 하면 소품에서 사용할 수 있는 연결된 작업이 아닌 가져온 원시 작업을 호출하게 됩니다.아래 예시는 스토어를 갱신하지 않습니다.

const MyComponent = (props) => {
  // we never destructured someAction off of props
  // and we're not invoking props.someAction
  // that means we're invoking the raw action that was originally imported
  // this raw action is not connected, and won't be automatically dispatched
  someAction();
};

이것은 리액트 리듀스를 사용하는 동안 항상 마주치는 흔한 버그입니다.eslint의 그림자 없음 규칙을 따르면 이 함정을 피할 수 있습니다.

당신의.addTodo컴포넌트는 스토어 상태 및 메서드(디스패치, getState 등)에 액세스할 수 있습니다.React 뷰를 Redux 스토어에 연결하면connect메서드, 스토어 상태 및 메서드에 액세스할 수 있습니다.

({ dispatch })단순히 JS를 사용하여 할당을 파기하고dispatch부터this.props물건.

언급URL : https://stackoverflow.com/questions/42871136/dispatch-function-in-react-redux