2017-12-05 20 views
6

Tôi đang phá vỡ ví dụ điển hình của Redux để cố gắng hiểu nó. Tôi đọc rằng mapDispatchToProps cho phép bạn lập bản đồ hành động gửi như đạo cụ, vì vậy tôi nghĩ viết lại addTodo.js để sử dụng mapDispatchToProps thay vì gọi công văn (addTodo()). Tôi gọi nó là addingTodo(). Một cái gì đó như thế này:Tôi có thể mapDispatchToProps mà không có mapStateToProps trong Redux không?

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 

Tuy nhiên, khi tôi chạy ứng dụng, tôi nhận được lỗi này: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Tôi không bao giờ sử dụng mapStateToProps để bắt đầu với thành phần AddTodo, vì vậy tôi không chắc chắn những gì đã sai. Cảm giác ruột của tôi nói rằng connect() mong đợi mapStateToProps trước mapDispatchToProps.

Bản gốc làm việc như sau:

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 

Hoàn repo có thể tìm thấy here.

Vì vậy, câu hỏi của tôi là, có thể thực hiện mapDispatchToProps mà không có mapStateToProps không? Là những gì tôi đang cố gắng làm một thực hành chấp nhận được - nếu không, tại sao không?

Trả lời

5

Có, bạn có thể. Chỉ cần vượt qua null như là đối số đầu tiên:

AddTodo = connect(
    null, 
    mapDispatchToProps 
)(AddTodo) 

Vâng, nó không chỉ là thực hành chấp nhận được, nó được đề nghị cách để kích hoạt hành động. Sử dụng mapDispatchToProps cho phép che giấu thực tế sử dụng redux bên trong các thành phần phản ứng của bạn

Các vấn đề liên quan