2017-12-05 153 views
6

Rozbijam przykład todo Redux, aby spróbować go zrozumieć. Przeczytałem, że mapDispatchToProps pozwala mapować akcje wysyłki jako rekwizyty, więc pomyślałem o przepisaniu addTodo.js, aby użyć mapDispatchToProps zamiast wywoływania wysyłki (addTodo()). Nazwałem to addingTodo(). Coś takiego:Czy mogę mapDispatchToProps bez mapStateToProps w Redux?

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 

Jednak kiedy uruchomić aplikację, pojawia się ten błąd: Error: Invalid value of type object for mapStateToProps argument when connecting component AddTodo.. Nigdy nie używałam mapStateToProps na początku komponentu AddTodo, więc nie byłam pewna, co było nie tak. Moje przeczucie mówi, że connect() spodziewa się, że mapStateToProps będzie poprzedzać mapDispatchToProps.

Oryginalny pracy wygląda następująco:

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 

Kompletna repo można znaleźć here.

Moje pytanie brzmi: czy można wykonać mapDispatchToProps bez mapStateToProps? Czy to, co staram się robić w dopuszczalnej praktyce - jeśli nie, dlaczego nie?

Odpowiedz

5

Tak, możesz. Wystarczy przejść null jako pierwszy argument:

AddTodo = connect(
    null, 
    mapDispatchToProps 
)(AddTodo) 

Tak, to nie tylko dopuszczalna praktyka, zaleca drogę do inicjowania działań. Korzystanie z mapDispatchToProps pozwala ukryć fakt używania redux wewnątrz komponentów reakcji