2017-12-05 177 views
6

Redux 'todo örneklerini anlamaya çalışıyorum. mapDispatchToProps'un gönderim eylemlerini sahne olarak eşlemenize izin verdiğini okudum, bu yüzden gönderimi (addTodo()) çağırmak yerine mapDispatchToProps kullanmak için addTodo.js'u yeniden yazmayı düşündüm. addingTodo()'u aradım. Böyle bir şey: Ben app çalıştırdığınızdaHaritasız MapDispatchToProps Redux'da mapStateToProps?

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 

Ancak, bu hatayı alıyorum: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. AddTodo bileşeninde başlamak için hiç mapStateToProps kullanmamıştım, bu yüzden neyin yanlış olduğundan emin değildim. Bağırsak hislerim connect()'un mapStateToProps'un mapDispatchToProps'dan önce gelmesini beklediğini söylüyor.

çalışma özgün şuna benzer:

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 

Komple repo here bulunabilir.

Benim sorum şu, mapDispatchToProps mapStateToProps olmadan yapmak mümkün mü? Kabul edilebilir bir uygulama yapmaya çalıştığım şey - eğer değilse, neden olmasın?

cevap

5

Evet, yapabilirsiniz. Sadece ilk argüman olarak null geçmesi:

AddTodo = connect(
    null, 
    mapDispatchToProps 
)(AddTodo) 

Evet, sadece kabul edilebilir bir uygulama değil, eylemleri tetiklemek için bir yol tavsiye edilir. mapDispatchToProps'u kullanmak, reaktif bileşenlerinizin içindeki redux kullanma gerçeği gizlemenize olanak sağlar