ReduxのProviderコンポーネントとContainerコンポーネントを理解する

Providerコンポーネント

• react-reduxが提供するReactコンポーネント
• 唯一Storeを持つことができるコンポーネント
• 配下のコンポーネントにStoreに保持するstateやdispatcherを渡す役目
• Reduxでは1つのstateでアプリケーションの状態管理をするため、アプリケーション内に存在するProviderコンポーネントは1つのみ

const App = () => {
  return (
    <Provider store={createStore(reducers)}>
      <View>
         <Header>
         <PostList>
         <Footer> 
      </View>
    </Provider>
  )
}

Containerコンポーネント

• connect関数でReactコンポーネントをラッピングしたもの
• Connected Componentとも呼ぶ
• Reactでは「Stateを親コンポーネントに持たせる」と表現するが、それをReduxでは名前をつけただけ
• ただし、ReduxではStateはStoreに持つので、connectしてStateをPropsとして受け取る形になる

class PostList extends React.Component {
  render() {
    //ここにstateの中身がくる
    console.log(this.props);
  }
}

const mapStateToProps = state => {
  return { posts: state.posts };
}

//PostListをconnectでラッピングしたここがContainerコンポーネント
export default connect(mapStateToProps)(PostList);

このようにすることで、stateの中のpostsのみをpropsで受け取ることができる