Redux에서 mapStateToProps없이 DispatchToProps를 매핑 할 수 있습니까?


93

나는 그것을 이해하기 위해 Redux의 할일 예제를 분리하고 있습니다. 나는 mapDispatchToProps디스패치 액션을 소품으로 매핑 할 수 있다는 것을 읽었 으므로 addTodo.jsdispatch (addTodo ())를 호출하는 대신 mapDispatchToProps를 사용하도록 다시 작성 하는 것을 생각했습니다 . 나는 그것을 불렀다 addingTodo(). 이 같은:

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

let AddTodo = ({addingTodo}) => {
  let input;
  return (
      <div>
        <form onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          addingTodo(input.value)
          input.value = ""
        }}>
          <input ref={node => {
            input = node
          }} />
          <button type="submit">Submit</button>
        </form>
      </div>
  )
}

const mapDispatchToProps = {
  addingTodo: addTodo
}

AddTodo = connect(
  mapDispatchToProps
)(AddTodo)

export default AddTodo

그러나 앱을 실행할 때 다음 오류가 발생 Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.합니다.. 나는 mapStateToPropsAddTodo 구성 요소에서 시작해 본 적이 없어서 무엇이 잘못되었는지 확신하지 못했습니다. 내 직감은 그것이 선행 을 connect()기대 한다고 말합니다 .mapStateToPropsmapDispatchToProps

작업 원본은 다음과 같습니다.

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 = ""
        }}>
          <input ref={node => {
            input = node
          }} />
          <button type="submit">Submit</button>
        </form>
      </div>
  )
}

AddTodo = connect()(AddTodo)

export default AddTodo

완전한 저장소는 여기 에서 찾을 수 있습니다 .

제 질문은 mapStateToProps없이 mapDispatchToProps를 수행 할 수 있습니까? 내가하려는 것이 수용 가능한 관행입니까? 그렇지 않다면 왜 안됩니까?

답변:


145

그래 넌 할수있어. 그냥 통과 null첫 번째 인수로 :

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

예, 허용되는 연습 일뿐만 아니라 작업을 트리거하는 데 권장되는 방법입니다. 를 사용 mapDispatchToProps하면 반응 구성 요소 내에서 redux 사용 사실을 숨길 수 있습니다.


6
하지만 mapDispatchToProps없이 mapStateToProps를 같은 방식으로 사용할 수 있습니까?
Velizar Andreev Kitanov

6
@VelizarAndreevKitanov 예
iofjuupasli

23
만 사용하는 경우 mapStateToProps두 번째 인수를 생략 할 수 있습니다 connect. 그것은 통과 할 필요는 없습니다null
theUtherSide

1
반대의 경우 mapDispatchToProps가없는 mapStateToProps의 경우 null을 전달할 필요가 없습니다. mapStateToProps 만 전달
Rajesh Nasit

2
connect인수 목록 대신 매개 변수로 개체 리터럴을 허용해야합니다.
Mahdi Pedram 2018
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.