設計概念與實戰
Redux
slide: https://goo.gl/K2y8ck
DMoon
創科資訊全端工程師
國立彰化師範大學 資工系畢業
中央軟工所
前端及 React 愛好者，喜好參與社群交流
近期接觸 React Native 後，開始嘗試跨平台手機應用開發
喜歡前端經常迸出令人驚艷的潮潮東西，還有豐富活躍的社群文化
dmoon.t@gmail.com
Why we need Redux ?
單頁面應用漸趨複雜
JavaScript 需要管理比以往更多的 state
資料操作同步問題
在後端我們怎麼處理的？
剛學 React 的時候
使用在專案上開發一陣子後
-
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 核心概念介紹
Redux-intro
By dmoon
