Nice programing

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

nicepro 2020. 11. 11. 20:40
반응형

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


나는 그것을 이해하기 위해 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

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

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


Yes, you can. Just pass null as first argument:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Yes, it's not just acceptable practice, it's recommended way to trigger actions. Using mapDispatchToProps allows to hide the fact of using redux inside your react components

참고URL : https://stackoverflow.com/questions/47657365/can-i-mapdispatchtoprops-without-mapstatetoprops-in-redux

반응형