iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 16

【DAY 16】利用redux與react搭配在做出一個to do list吧!(中)

【前言】
  又是一個禮拜的煎熬......但還是得要繼續看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;

上一篇
【DAY 15】利用redux與react搭配在做出一個To do list吧!(上)
下一篇
【DAY 17】利用redux與react搭配在做出一個to do list吧!(下)
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言