【前言】
　　又是一個禮拜的煎熬......但還是得要繼續看redux，加油加油
【正文】
　　昨天把presentational component順勢寫完了，今天就來寫container component吧！在開始撰寫之前，所謂的container component其實就是一個使用store.subscribe()讀取store中一部分的state當成props傳給presentational component render的component，所以原則上，我們並不會在container component中撰寫任何有關html標籤所構成的架構碼。

　　而在這些container component裡面是這樣的：

1. 注入state到presentational component-->mapStateToProps()
2. 注入dispatch()到presentational component並當成是其presentational component的callback function-->mapDispatchToProps()
3. 利用connect()把mapStateToProps()和mapDispatchToProps()來產生該container component

　　所以我們可以知道container component是透過React Redux library 的 connect()產生來的。

• connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
  connect()的功能是將react component與redux的store做連結，你可以想像成是它是presentational component與store之間的橋樑這樣。
• mapStateToProps(state)
  這是connect()第一個參數，可以把store中的state當成props傳到presentational component，而且只要mapStateToProps()被宣告，就會監聽store中state裡的變化，只要有變化，就會觸發這個function，所以presentation component也會被重新render。
• mapDispatchToProps(dispatch)
  這是connect()第二個參數，他可以把dispatch()傳到presentational component並當成是其的callback function

• VisibleFiter.js

// import react-redux connect()
import { connect } from 'react-redux';
// import action creator
import { toggleTodo } from '../actions';
// import TodoList.js(presentational component)
import TodoList from '../components/TodoList';

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed);
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed);
    default: 
    return todos;
  }
};

// mapStateToProps()可以將store中state當成props傳入component
const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter),
  };
};

// mapDispatchToProps()可以注入dispatch到component 
const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id));
    }
  };
};

// 利用connect()產生container component
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps,
)(TodoList);

export default VisibleTodoList;

• FilterLink.js

import { connect } from 'react-redux';
import { setVisibilityFilter } from '../actions';
import Link from '../components/Link';

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter,
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter));
    },
  };
};

const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Link);

export default FilterLink;