Чи можу я mapDispatchToProps без mapStateToProps у Redux?


92

Я розбиваю приклад Redux, щоб спробувати зрозуміти його. Я прочитав, що mapDispatchToPropsдозволяє відобразити диспетчерські дії як реквізит, тому я подумав переписати, addTodo.jsщоб використовувати mapDispatchToProps замість виклику диспетчеру (addTodo ()). Я зателефонував 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.. Я ніколи не mapStateToPropsпочинав з компонента AddTodo, тому не був впевнений, що не так. Моє відчуття кишки говорить про те, що він connect()очікує mapStateToPropsпереду mapDispatchToProps.

Робочий оригінал виглядає так:

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

Повне репо можна знайти тут .

Тож моє запитання: чи можна робити mapDispatchToProps без mapStateToProps? Чи є те, що я намагаюся зробити прийнятною практикою - якщо ні, чому ні?

Відповіді:


144

Так, ти можеш. Просто передайте nullяк перший аргумент:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Так, це не просто прийнятна практика, це рекомендований спосіб викликати дії. Використання mapDispatchToPropsдозволяє приховати факт використання редуксу всередині ваших реакційних компонентів


6
Але чи можу я використовувати mapStateToProps без mapDispatchToProps так само?
Велізар Андрєєв Кітанов

6
@VelizarAndreevKitanov так
iofjuupasli

22
При використанні лише mapStateToPropsможна опустити другий аргумент connect. Не потрібно проходитиnull
theUtherSide

1
Для зворотного випадку mapStateToProps без mapDispatchToProps не потрібно передавати значення null. only pass mapStateToProps
Rajesh Nasit

2
connectповинен був прийняти об’єктний літерал як параметр замість списку аргументів.
Махді Педрам,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.