Bisakah saya mapDispatchToProps tanpa mapStateToProps di Redux?


95

Saya membongkar contoh todo Redux untuk mencoba memahaminya. Saya membaca bahwa mapDispatchToPropsmemungkinkan Anda untuk memetakan tindakan pengiriman sebagai alat peraga, jadi saya berpikir untuk menulis ulang addTodo.jsuntuk menggunakan mapDispatchToProps daripada memanggil pengiriman (addTodo ()). Saya menyebutnya addingTodo(). Sesuatu seperti ini:

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

Namun, ketika saya menjalankan aplikasi, saya mendapatkan error ini: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Saya tidak pernah mapStateToPropsmemulai dengan komponen AddTodo, jadi saya tidak yakin apa yang salah. Naluri saya mengatakan bahwa connect()mengharapkan mapStateToPropsuntuk mendahului mapDispatchToProps.

Dokumen asli yang berfungsi terlihat seperti ini:

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 lengkap dapat ditemukan di sini .

Jadi pertanyaan saya adalah, apakah mungkin melakukan mapDispatchToProps tanpa mapStateToProps? Apakah yang saya coba lakukan adalah praktik yang dapat diterima - jika tidak, mengapa tidak?

Jawaban:


145

Ya kamu bisa. Lewati saja nullsebagai argumen pertama:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

Ya, ini bukan hanya praktik yang dapat diterima, ini juga cara yang disarankan untuk memicu tindakan. Menggunakan mapDispatchToPropsmemungkinkan untuk menyembunyikan fakta penggunaan redux di dalam komponen react Anda


6
Tetapi dapatkah saya menggunakan mapStateToProps tanpa mapDispatchToProps dengan cara yang sama?
Velizar Andreev Kitanov

6
@VelizarAndreevKitanov ya
iofjuupasli

23
Saat hanya menggunakan mapStateToProps, seseorang dapat menghilangkan argumen kedua untuk connect. Tidak perlu lulusnull
theUtherSide

1
Untuk kasus sebaliknya mapStateToProps tanpa mapDispatchToProps tidak perlu meneruskan null. hanya lulus mapStateToProps
Rajesh Nasit

2
connectseharusnya menerima literal objek sebagai parameter, bukan daftar argumen.
Mahdi Pedram
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.