が反応：プロパティに渡し

Question

私はAddTodoにプロパティとしてストアに渡ししようとしていますが、私はエラーを取得しています：私は、なぜ

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux' 
import { connect } from 'react-redux' 
import { createStore } from 'redux' 

const todo = (state, action) => { 
    switch (action.type) { 
     case 'ADD_TODO': 
      return { 
       id: action.id, 
       text: action.text 
      } 
     default: 
      return state 
    } 
} 

const todos = (state = [], action) => { 
    switch (action.type) { 
     case 'ADD_TODO': 
      return [ 
       ...state, 
       todo(undefined, action) 
      ]; 
     default: 
      return state 
    } 
} 

let store = createStore(todos) 


let nextTodoId = 0 
const AddTodo =() => { 
    let input; 

    //this works 
    console.log(store.getState()) 
    //this doesn't 
    console.log(this.props.todos) 


    return (
     <div> 
      <input ref={node => {input = node}}/> 
      <button onClick = {() => { 
       store.dispatch({ 
        type: 'ADD_TODO', 
        id: nextTodoId++, 
        text: input.value 
       }); 
       input.value = '' 
      }}> 
       Add Todo 
      </button> 



     </div> 
    ) 
}; 

store.subscribe(AddTodo) 


ReactDOM.render(
    <AddTodo 
     todos={store.getState()} 
    />, 
    document.getElementById('root')); 

未定義

のプロパティ「ドス」を読み取ることができません私は少し混乱しています this.props.todosを印刷するとエラーが発生します。私は <AddTodo todos={...}/>

Answer 1

機能部品で小道具としてtodosに渡していたと思った異なる動作を、彼らはthisのコンテキストを持っていないが、彼らの小道具は

はそれを動作させるために、関数の引数を通過していますアルンゴーシュはこの

のようなたとえば、あなたが購読パターンを再検討すべきである、と言っているように、残りの部分については

const AddTodo = (props) => { 
    let input; 
    console.log(props.todos); 
    return (/* and the rest of your code...*/) ; 
}; 

：、ちょうどこのように、addToDosのあなたの関数呼び出しを変更私は何をやっているhttp://imgur.com/a/7y4ig -

Answer 2

あなたはストアオブジェクトを渡し、Reduxのチュートリアルで変更

store.subscribe(() => { 
    // In our case the state will be updated when todos are set 
    console.log(store.getState().todos); 
});