ฉันสามารถ mapDispatchToProps ที่ไม่มี mapStateToProps ใน Redux ได้หรือไม่


95

ฉันกำลังแยกตัวอย่างสิ่งที่ต้องทำของ 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

แต่เมื่อฉันใช้ app Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.ที่ฉันได้รับข้อผิดพลาดนี้: ฉันไม่เคยmapStateToPropsเริ่มต้นด้วยส่วนประกอบ AddTodo ดังนั้นฉันจึงไม่แน่ใจว่ามีอะไรผิดปกติ ความรู้สึกของฉันบอกว่า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 สมบูรณ์สามารถพบได้ที่นี่

คำถามของฉันคือเป็นไปได้ไหมที่จะทำ mapDispatchToProps โดยไม่มี mapStateToProps เป็นสิ่งที่ฉันพยายามปฏิบัติเป็นที่ยอมรับ - ถ้าไม่ทำไมไม่ทำ?

คำตอบ:


145

ใช่คุณสามารถ. เพียงส่งnullเป็นอาร์กิวเมนต์แรก:

AddTodo = connect(
    null,
    mapDispatchToProps
)(AddTodo)

ใช่ไม่ใช่แค่การปฏิบัติที่ยอมรับได้ แต่ขอแนะนำวิธีกระตุ้นการกระทำ การใช้mapDispatchToPropsช่วยให้สามารถซ่อนข้อเท็จจริงของการใช้ redux ภายในส่วนประกอบปฏิกิริยาของคุณ


6
แต่ฉันสามารถใช้ mapStateToProps โดยไม่มี mapDispatchToProps ด้วยวิธีเดียวกันได้หรือไม่
Velizar Andreev Kitanov

6
@VelizarAndreevKitanov ใช่
iofjuupasli

23
เมื่อใช้เพียงหนึ่งอาจละเว้นอาร์กิวเมนต์ที่สองไปmapStateToProps connectไม่จำเป็นต้องผ่านnull
theUtherSide

1
สำหรับกรณีย้อนกลับ mapStateToProps ที่ไม่มี mapDispatchToProps ไม่จำเป็นต้องผ่าน null ผ่านเฉพาะ mapStateToProps
Rajesh Nasit

2
connectควรยอมรับออบเจ็กต์ลิเทอรัลเป็นพารามิเตอร์แทนรายการอาร์กิวเมนต์
Mahdi Pedram
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.