ReduxでmapStateToPropsを使用する

Question

私は簡単な例を得ようとしています。以下にコードを示します。

stateから来ている

mapStateToProps = (state) => {}

：でこの例で

、？私はちょうど私が通過しているものについて少し混乱していますか？

connect(mapStateToProps)(TodoApp)はmapStateToPropsに返された状態をTodoAppに「バインド」し、this.propsでアクセスできることを理解しています。

私は、私は[OK]を更新TodoApp

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


const stateObject = [ 
    { 
     'id': 1, 
     'name': 'eric' 
    }, 
    { 
     'id': 2, 
     'name': 'john' 
    } 
] 

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


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



const store = createStore(todos) 

//confused by what is happening here 
const mapStateToProps = (state) => { 
    return { 
     ?: ? 
    } 
} 

const TodoApp =() => { 
    //How do I get this to print out the current props? 
    console.log(this.props) 
    return (
     <div> 
      Some Text 
     </div> 
    ) 
} 

connect(mapStateToProps)(TodoApp) 


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

内の現在の状態をプリントアウトすることができ、このコードに行うには何が必要です：

const mapStateToProps = (state) => { 
    return { 
     names: state 
    } 
} 

const TodoApp =() => { 
    console.log(this.props) 
    return (
     <div> 
      Some Text1 
     </div> 
    ) 
} 

const ConnectedComponent = connect(mapStateToProps)(TodoApp); 


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

しかし、私はまだconsole.log(this.props)ためundefinedを取得しています。

私は間違っていますか？

Answer 1

機能コンポーネントを持つthisはありません。小道具にアクセスするには、これに変更することができます：

const TodoApp = (props) => { 
    console.log(props) 
    return (
     <div> 
      Some Text1 
     </div> 
    ) 
} 

Answer 2

mapStateToPropsは、Redux状態のいくつかの部分をあなたの反応コンポーネントの小道具にマップします。

状態はstoreからです。実際には、store.getState()に電話することで、いつでも現在の状態を見ることができます。 createStore(todos)を実行すると、todosレデューサーに基づいて状態が作成されます。 todosレデューサーに表示されているとおり、初期状態はstateObjectで、これは上に定義されています。

だから、mapStateToPropsに戻る。その関数で行う必要があるのはオブジェクトを返すことだけです。キーは小道具になり、値はRedux状態から取得された値になります。あなたは内部のconsole.log(this.props)は（レンダリングを行う際に今

const mapStateToProps = function (state) { 
    return { 
     propName: state 
    } 
} 

）、あなたはthis.props.propName内部に格納されている全体の状態を見ることができます：ここでmapStateToPropsの例です。これはmapStateToPropsによって達成されます。

アクションのディスパッチが行われるたびに、あなたのアプリにあるmapStateToPropsが呼び出され、作成されたすべてのコンポーネントに小道具が適用され、小道具が変更された場合、レンダリングする。この種の動作は、connect機能によって提供されます。したがって、すべてのコンポーネントに対してこの動作を実装する必要はありません。つまり、const ConnectedComponent = connect(mapStateToProps)(SomeComponent)のように適用し、SomeComponentの代わりにConnectedComponentを使用するだけです。