React- mapStateToProps 기능 ISN의 나의 할 일 응용 프로그램에서 호출하기

Question

이 응용 프로그램의 기본 구조는 감속기의 함수가 호출지고

App 
-TodoForm 
-TodoList 
--TodoListItem 

REDUX에서 내 두번째 일이다하지만 mapStateToProps를 호출하지 않습니다 . 콘솔 로그를 보았습니다. react-hot-boilerplate를 사용했습니다. mapStateToProps 함수가 호출되지 않는 이유를 알려주십시오.

https://github.com/rickieanand/reduxTodo

가져 오기에서 {구성 요소} '반응'반작용; 가져 오기 ReactDOM from 'react-dom'; 에서 수입 {createStore은} '돌아 오는' '반응-REDUX'

//store 

    let store = createStore(todo) 


    //actions 
    const ADD_TODO = 'ADD_TODO' 
    let x = 1 
    function addTodo(text) { 

     return { 
      type: ADD_TODO, 
      id: x++, 
      text: text 
     } 

    } 

    //reducer 

    function todo(state = { id: 0, text: "", completed: false }, action) { 
     console.log("reducer Called") 
     console.log(action) 

     switch (action.type) { 
      case 'ADD_TODO': 

       console.log(Object.assign({}, state, { 
        id: action.id, 
        text: action.text, 
        completed: false 
       }) !== state) 

       return Object.assign({}, state, { 
        id: action.id, 
        text: action.text, 
        completed: false 
       }) 
      default: 
       return state 
     } 
    } 




    //component App 
    class App extends Component { 
     onHandleSubmit(text) { 
      console.log('OnHandleSubmit Called') 
      store.dispatch(addTodo(text)) 
      console.log('----------') 
      store.getState() 
      console.log('----------') 
     } 
     render() { 
      console.log(this.props) 
      return (
       <div> 
        <h1>Hello, world.</h1> 
        <TodoForm onHandleSubmit={this.onHandleSubmit}/> 
        <TodoList/> 
       </div> 
      ); 
     } 
    } 

    function mapStateToProps(state, ownProps) { 
     console.log("mapStateToProps") 
     console.log(state) 
     console.log(ownProps) 
     return { 
      text: state.text, 
      id: state.id, 
      completed: false 
     } 
    } 

    connect(mapStateToProps)(App) 

    //component Form 

    class TodoForm extends Component { 
     constructor(props) { 
      super(props) 
      //   this.handleAdd = this.handleAdd.bind(this) 
     } 
     // handleAdd(e){ 
     // e.preventDefault() 
     // console.log(e.target) 
     // //dispatch(addTodo(e.value)) 
     // } 
     render() { 
      let input 
      return (
       <div> 
        <form onSubmit={e => { 
         e.preventDefault() 
         if (!input.value.trim()) { 
          return 
         } 
         console.log(input.value) 
         this.props.onHandleSubmit(input.value) 
         //store.dispatch(addTodo(input.value)) 
         //input.value = '' 
        } }> 
         <input ref={node => { 
          input = node 
         } } /> 
         <button type="submit"> 
          Add Todo 
         </button> 
        </form> 
       </div> 
      ); 
     } 
    } 

    //component TodoList 
    class TodoList extends Component { 
     constructor(props) { 
      super(props) 

     } 
     render() { 
      return (
       <ul><TodoListItem /></ul> 
      ); 
     } 
    } 

    //component TodoListItem 
    class TodoListItem extends Component { 
     constructor(props) { 
      super(props) 
      this.handleDelete = this.handleDelete.bind(this) 
     } 
     handleDelete(e) { 
      e.preventDefault() 
      console.log(e.value) 
      //this.props.dispatch(addTodo(e.value)); 
     } 
     render() { 
      return (
       <li>{this.props.text}<button id={this.props.id} onClick= {this.handleDelete}/></li> 
      ); 
     } 
    } 

    ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root')); 

Answer 1

connect(mapStateToProps)(App) 반환 연결된 기기에서 수입 {공급자 연결을}. 쓰다; 그런 다음

const ConnectedApp = connect(mapStateToProps)(App); 

: 첫째

ReactDOM.render(<Provider store={store}><ConnectedApp /></Provider>, document.getElementById('root'));