react-redux-boilerplate

設計概念與實戰

Redux

slide: https://goo.gl/K2y8ck

DMoon

創科資訊全端工程師

國立彰化師範大學 資工系畢業

中央軟工所

Blog, Github

前端及 React 愛好者，喜好參與社群交流
近期接觸 React Native 後，開始嘗試跨平台手機應用開發

喜歡前端經常迸出令人驚艷的潮潮東西，還有豐富活躍的社群文化

dmoon.t@gmail.com

Why we need Redux ?

單頁面應用漸趨複雜

JavaScript 需要管理比以往更多的 state

資料操作同步問題

在後端我們怎麼處理的？

React

資料跟 View 的綁定

剛學 React 的時候

使用在專案上開發一陣子後

慘痛案例: props 傳遞地獄

  • React component 的 state 彼此獨立

  • 欲修改父 component 的state，需透過 props 傳遞 callback func 

Count : 0

What is Redux ?

Design Pattern

Dealing with data

將 state 集中管理

Predictable State container

Redux 是 JavaScript 狀態容器

提供可預測化的狀態管理

Redux

  • Single source of truth  (單一資料來源)
     

  • State is read-only
     

  • Changes are made with pure functions

唯一改變 state 的方法就是觸發 action (修改資料的申請動作)

對應不同的 action，使用純函數編寫 reducer 來執行 state 修改

整個應用的 state 存在一棵 object tree 中，並且放在唯一的 container (store) 內 

三大原則

Redux Flow

開發團隊的日常

PM

Engineer

Project

Product

客戶提出新需求

開規格

實際功能開發

release

Standard Operating Procedures

Redux Flow

View
( React )

Store

Action

Reducer

dispatch

畫面需要改變

=> 產生 Action

return

newState

資料變更

Server

request

PM

Engineer

Project

Product

response

Action

事件的描述

Action

const ADD_TODO = 'ADD_TODO';

// action
{
  type: ADD_TODO,  // required
  text: 'Build my first Redux app',
}

  • JS object

  • 包含事件的描述與更新 state 所需的相關資料

  • type 是必要的，表示要執行的動作

Action Creator

產生 Action 的 pure func

Action Creator

const ADD_TODO = 'ADD_TODO';

// action creator
function requestAddTodo() {
  return {
    type: ADD_TODO,
    text: 'Build my first Redux app',
  };
}

// dispatch action
dispatch(requestAddTodo());

  • pure function，返回一個 action

  • dispatch 到 reducer

Redux Flow

View
( React )

Store

Action

Reducer

dispatch

畫面需要改變

=> 產生 Action

return

newState

資料變更

Server

request

PM

Engineer

Project

Product

response

Reducers

更新 State

Reducer

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, {
        text: action.text,
        completed: false
      }];
    default:
      return state;
  }
}
store = {
  todos: [{
    text: 'todo1 title',
    completed: false,
  },{
    text: 'todo2 title',
    completed: true,
  }],
}

  • pure function

  • return new state

Redux Flow

View
( React )

Store

Action

Reducer

dispatch

畫面需要改變

=> 產生 Action

return

newState

資料變更

Server

request

PM

Engineer

Project

Product

response

Store

存放共用 state 的容器

Store

{
  todos: [
    {
      text: 'todo1',
      completed: true,
    },
  ],
}

  • object tree

  • Immutable

Redux Flow

View
( React )

Store

Action

Reducer

dispatch

畫面需要改變

=> 產生 Action

return

newState

資料變更

Server

request

PM

Engineer

Project

Product

response

One more thing...

Time Travelling Debugger

React-Redux

React 框架綁定

Provider

Redux Store

Connect

Connect

Component A

Component B

Smart Component
v.s
Dumb Component

容器組件 展示組件
Location 最頂層，路由處理 中間和子組件
Aware of Redux 是 否
讀取數據 從 Redux 獲取 state 從 props 獲取數據
修改數據 向 Redux 派發 actions 從 props 調用回調函數

Smart

Dumb

Redux Ecosystem

Dan Abramov

gaearon

 可以 dispatch thunk function

紀錄所有 Redux action 和下一次 state 的 log

Dan Abramov

Redux Tools

 可以 dispatch promise

Resource & Reference

Redux 核心概念介紹

Made with Slides.com