简介

在开发专案中，随着专案的大小越来越大与複杂，我们的程式需要管理高于以往的state，这些state可能包含伺服器回应或快取的资料，管理这个不断变化的state是非常困难的，这时候就需要一个module来统一管理state，让state的变化更具有可预测性。

从图看Redux

(图片来源 : Redux + React-Router 的入门教学和配置教程)

React Component利用Action Creater建立了一个Action。利用dispath将action传送给Store。Store接收到action后会自动调用reducers，并传入两个参数(state,action)，而reducers会对指定的动作做出回应并且回传一个新的state。Store将新的state渲染在React Component中。

利用动图可以更清楚的了解Redux整的作业流程。

(图片来源 : Redux + React-Router 的入门教学和配置教程)

三大原则

Redux 可以用三个基本的原则来描述：

唯一真相来源

整个应用程式的state会被储存到一个树状的物件并且被放在唯一的一个store里。

State 是唯读的

改变state的唯一方式是发出一个action，也就是一个描述将要发生什么事情的物件。

pure function 的 Reducer

要指定state tree如何藉由action来改变，必须撰写一个Reducer Function，而这个Fucntion必须是pure function，而pure function的定义可以参考纯粹的好，Pure Function 知道这篇文章，里面对于pure function描述得很清楚。

基础

Action

Action是从程式中传递到store的资讯payload，他是store唯一个数据来源，藉由store.dispatch()来传替它，action本身是个告诉store该做什么动作的物件。

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

上面是一个简易且标準的action模型，它是一个JavaScript的物件，值得注意的是action中必须拥有一个type属性，通常被定义成字串，它用来明确的告诉store该做什么。

Action Creater

Action Creater就是一个产生action的function。

const addTodo = (text) => {    return{        type:"ADD_TODO",        text    }};addTodo("Build my first Redux app"); 

在需要建构不同且数量多的action的时候，action creater便可以体现出其方便性，由于action creater return一个action的物件，所以可以直接使用dispatch(addTodo("Build my first Redux app"))直接传递action。

---

Reducer

Action是描述发生的事情并不会指定程式中的state该如何应对，处理state是reducer的工作，注意!!reducer是一个pure function，它接收两个参数，state与action然后回传一个新的State。

const todoApp = (state = {},action) => {    switch(action.type){ //使用action的type来决定该做什么动作        case "TODO_1" :             return Object.assign({},state,{                //...更新的state物件            })                    case "TODO_2" :             return Object.assign({},state,{                //...更新的state物件            })                        //...                    default:            return state; //当没有合适的动作则回传原本的state    } };

上面建立了一个简易且标準的reducers，它可以里用switch case达到一次判定多种动作的reducers，而我们使用Object.assign为的是不直接写入原本的state，取而代之的是回传一个新的物件，以保持旧state的完整度。

在开发专案的时候随着专案越来越複杂，Reducers也会越来越多越来越複杂，可以以不同功能且互不影响的原则下将reducers拆分成多个小的reducers，而Redux提供了一个utility combineReducers()，他会产生一个function，将每一个值都是不同的reducer function转换成一个可以传递给createStore的单一 reducers function。

const Reacer_1 = (state = {},action) => {    swtich(action.type){        case "TODO_1" :             return NewState;                    //...                defualt :            return state;    }};const Reacer_2 = (state = {},action) => {    swtich(action.type){        case "TODO_1" :             return NewState;                    //...                defualt :            return state;    }};const Reducers = combineReducers({    Reacer_1,    Reacer_2})

---

Store

Store简单来说就是将action与reducers结合起来的物件，store将会负责以下事件:

管理应用程式状态允许藉由getState()取得state允许藉由dispatch(action)传递action已更新State。

注意!!在专案中无论资料处理的逻辑多么複杂，应该使用combineReducers()将多个reducers function合併成一个，而不是建立多个store。

若已经有了一个reducer后便可以使用redux中的createStore()来建立store。

let store = createStore(Reducers);

参考资料 :
从Redux 的作者学习它
Redux + React-Router 的入门教学和配置教程