Redux(上)

結合阮老師的技術博客，將自己吸收到的內容做了個整理：

曾經有人說過這樣一句hua : 如果你不知道是否需要Redux，那就是不需要它。

從組建層面考慮，什么樣子的需要redux；某個組件的狀態需要共享，

某個狀態需要在任何地方都可以拿到，

一個組件需要改變全局狀態，

一個組件需要改變另一個組件的狀態

一)Redux的設計思想 很重要

1)web應用是一個狀態機，試圖與狀態是一一對應的

2)所有的狀態，保存在一個對象里面(唯一數據源)

二)基本概念和 API

1、store

store就是保存數據的地方，你可以把它看成一個容器。整個應用只能有一個Store

Redux提供createStore這個函數，用來生成Store，import?{createStore}?from?'redux'

/創建一個reducer文件夾?并引入reducer

const?store?=?createStore(reducer)

export?default?store

2、state

Store對象包含所有數據。如果想得到某個時點的數據，就要對 Store 生成快照。這種時點的數據集合，就叫做 State。

當前時刻的 State，可以通過store.getState()拿到。import?{?createStore?}?from?'redux';

const?store?=?createStore(fn);

const?state?=?store.getState();

Redux 規定， 一個 State 對應一個 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么樣，反之亦然。

3、Action

State 的變化，會導致 View 的變化。但是，用戶接觸不到 State，只能接觸到 View。所以，State 的變化必須是 View 導致的。Action 就是 View 發出的通知，表示 State 應該要發生變化了。

Action 是一個對象。其中的type屬性是必須的，表示 Action 的名稱。其他屬性可以自由設置，社區有一個規范可以參考。const?action?=?{

type:?'ADD_TODO',

payload:?'Learn?Redux'

};

上面代碼中，Action 的名稱是ADD_TODO，它攜帶的信息是字符串Learn Redux。

可以這樣理解，Action 描述當前發生的事情。改變 State 的唯一辦法，就是使用 Action。它會運送數據到 Store。

4、Action Creator

View 要發送多少種消息，就會有多少種 Action。如果都手寫，會很麻煩。可以定義一個函數來生成 Action，這個函數就叫 Action Creator。const?ADD_TODO?=?'添加?TODO';

function?addTodo(text)?{

return?{

type:?ADD_TODO,

text

}

}

const?action?=?addTodo('Learn?Redux');

上面代碼中，addTodo函數就是一個 Action Creator。

5、store.dispatch()

store.dispatch()是 View 發出 Action 的唯一方法。import?{?createStore?}?from?'redux';

const?store?=?createStore(fn);

store.dispatch({

type:?'ADD_TODO',

payload:?'Learn?Redux'

});

上面代碼中，store.dispatch接受一個 Action 對象作為參數，將它發送出去。

結合 Action Creator，這段代碼可以改寫如下。store.dispatch(addTodo('Learn?Redux'));?

6、Reducer

Store 收到 Action 以后，必須給出一個新的 State，這樣 View 才會發生變化。這種 State 的計算過程就叫做 Reducer。

Reducer 是一個函數，它接受 Action 和當前 State 作為參數，返回一個新的 State。const?reducer?=?function?(state,?action)?{

//?...

return?new_state;

};

整個應用的初始狀態，可以作為 State 的默認值。下面是一個實際的例子。const?defaultState?=?0;

const?reducer?=?(state?=?defaultState,?action)?=>?{

switch?(action.type)?{

case?'ADD':

return?state?+?action.payload;

default:

return?state;

}

};

const?state?=?reducer(1,?{

type:?'ADD',

payload:?2

});

上面代碼中，reducer函數收到名為ADD的 Action 以后，就返回一個新的 State，作為加法的計算結果。其他運算的邏輯(比如減法)，也可以根據 Action 的不同來實現。

實際應用中，Reducer 函數不用像上面這樣手動調用，store.dispatch方法會觸發 Reducer 的自動執行。為此，Store 需要知道 Reducer 函數，做法就是在生成 Store 的時候，將 Reducer 傳入createStore方法。import?{?createStore?}?from?'redux';

const?store?=?createStore(reducer);

上面代碼中，createStore接受 Reducer 作為參數，生成一個新的 Store。以后每當store.dispatch發送過來一個新的 Action，就會自動調用 Reducer，得到新的 State。

7、store.subscribe()

Store 允許使用store.subscribe方法設置監聽函數，一旦 State 發生變化，就自動執行這個函數。import?{?createStore?}?from?'redux';

const?store?=?createStore(reducer);

store.subscribe(listener);

顯然，只要把 View 的更新函數(對于 React 項目，就是組件的render方法或setState方法)放入listen，就會實現 View 的自動渲染。

store.subscribe方法返回一個函數，調用這個函數就可以解除監聽。let?unsubscribe?=?store.subscribe(()?=>

console.log(store.getState())

);

unsubscribe();?

三)舉個例子

簡單計數器的例子：麻雀雖小，五臟俱全

主要是觀察store中的三個方法：

1、store.getState(); 在視圖層通過該方法取到存儲在store中的state。下圖中23、24行代碼

2、store.dispatch(); 在視圖層通過該方法發送一個actions，去通知reducers去改變state值。下面的reducer函數

3、store.subscribe(); 通過該函數設置監聽，一旦state發生改變，就會調用該函數，重新渲染視圖層，如下面的31行代碼

很明顯 redux中 reducer和Action Creators都是一個純函數，這就要求他們不允許：直接修改 state 參數對象

請求 API

調用不純的函數，比如?Data.now()?Math.random()

那這樣的話，異步操作是如何實現的呢，這就需要借助中間件redux-thunk或者redux-sage在發出action到reducer接收到action之間來執行異步操作。(redux-thunk、redux-sage介紹參考簡書)const?Counter?=?({?value,?onIncrement,?onDecrement?})?=>?(

{value}

+

-

);

const?reducer?=?(state?=?0,?action)?=>?{

switch?(action.type)?{

case?'INCREMENT':?return?state?+?1;

case?'DECREMENT':?return?state?-?1;

default:?return?state;

}

};

const?store?=?createStore(reducer);

const?render?=?()?=>?{

ReactDOM.render(

value={store.getState()}

onIncrement={()?=>?store.dispatch({type:?'INCREMENT'})}

onDecrement={()?=>?store.dispatch({type:?'DECREMENT'})}

/>,

document.getElementById('root')

);

};

render();

store.subscribe(render);

總結

以上是生活随笔為你收集整理的react全局状态管理_react状态管理redux的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。