redux的學習筆記

redux的出現是爲了解決正常代碼解決不了的問題，在使用前先想下，是否真的有必要去使用它，如果答案是否，那就不使用。

redux

安裝

npm install --save redux
npm install --save react-redux

動機(motivation)

現在前端的狀態越來越多，包含後端返回的，緩存中的，以及本地處理狀態的一些數據等。還有些UI界面展示所需的狀態也越來越複雜，包含active 路由/選中的tabs/loading/分頁的控制等。

處理變化的數據是很困難的，尤其當model跟model之間有關聯，相互影響，並會在頁面上做更新

react一直在處理數據，那些突變和異步的數據(mutation and async)，單獨處理是很容易，但是合在一起會複雜，所以有了redux去處理這些數據。

actions：表示用戶做的一些操作

states：是redux定義的一些常量

reducers：是將actions和states結合起來的一個方法，是一個純函數，獲取之前的state，結合action，返回下一個state

通常會些很多小的reducer去分解大的reducers

核心(core)

所有的state都是存放在一個大的object樹中，而這個object樹是一個簡單的store。

state只讀，不能直接修改

reducer是一個純函數，獲取之前的state，結合action，返回下一個state，是返回的一個新的對象，不是在之前的對象上修改。

API

createStore(reducer,[preloadedState],[enhancer])

reducer(function)：給當前的state和要進行操作的action，返回一個新的state樹

preloadedState：store的初始值

returns

store：一個包含所有state的對象，只有通過dispatch action去改變，也可以訂閱這個變化去更新頁面UI的值

import {createStore} from 'redux'

function todo(state=[],actions){
    switch(actions.type){
        case "ADD_TODO":
            return state.concat(actions.text)
        default:
            return state
    }
}

const store=createStore(todo,['Redux InitValue'])

store.dispatch({
    type:"ADD_TODO",
    text:"NEW TODO"
})

console.log(store.getState())  //['Redux InitValue','NEW TODO']

注意點：

1. 不要create多個(>1)個store，可以使用combineReducers去create根節點。

2. 隨你選擇state的類型，可以是object或者其他不可變的類型。

3. 如果選擇了state的類型是object，返回值的時候，千萬別使用'Object.assign(state,newValue)'，記得這樣使用'Object.assign({},state,newValue)''，這樣不會重載之前的state，也就是說不會修改之前的state值。或者使用'{...state,...newValue}'

Object.assign(state,newValue)//錯誤

Object.assign({},state,newValue)//正確

{...state,...newValue}//正確

4. 當store被創建成功，但是dispatch一個無效的action，這時reducer返回一個初始值。

store

store包含整個state樹，改變裏面的state的唯一方法是dispatch一個action

store不是一個class，他是一個對象，只是包含很多方法

包含的方法有：getState() dispatch(action) subscribe(listener) replaceReducer(nextReducer)

getState()：返回當前state樹，也就是說是store的reducer返回的最新的值

dispacth()：這是唯一改變state變量的方法

如果action裏面包含異步的操作，可以使用類似Promise/thunk/Observable，可以安裝redux-thunk/redux-promise

subscribe(listener)：增加了一個改變的監聽器，可以在action被dispatch時被調用，以及在state樹深層的東西被改變時調用。也可以在callback時調用getState()，獲取最新的state樹。

中間件(middleware)

使用中間件的場景一般是處理action異步的操作。比如：redux-thunk

以上是我看原文的的理解啦，包含常用的方法和一些基礎的理解。

點擊這，查看原文連接。