Redux(上)

結(jié)合阮老師的技術(shù)博客，將自己吸收到的內(nèi)容做了個整理：

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

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

某個狀態(tài)需要在任何地方都可以拿到，

一個組件需要改變?nèi)譅顟B(tài)，

一個組件需要改變另一個組件的狀態(tài)

一)Redux的設(shè)計(jì)思想 很重要

1)web應(yīng)用是一個狀態(tài)機(jī)，試圖與狀態(tài)是一一對應(yīng)的

2)所有的狀態(tài)，保存在一個對象里面(唯一數(shù)據(jù)源)

二)基本概念和 API

1、store

store就是保存數(shù)據(jù)的地方，你可以把它看成一個容器。整個應(yīng)用只能有一個Store

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

/創(chuàng)建一個reducer文件夾?并引入reducer

const?store?=?createStore(reducer)

export?default?store

2、state

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

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

const?store?=?createStore(fn);

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

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

3、Action

State 的變化，會導(dǎo)致 View 的變化。但是，用戶接觸不到 State，只能接觸到 View。所以，State 的變化必須是 View 導(dǎo)致的。Action 就是 View 發(fā)出的通知，表示 State 應(yīng)該要發(fā)生變化了。

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

type:?'ADD_TODO',

payload:?'Learn?Redux'

};

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

可以這樣理解，Action 描述當(dāng)前發(fā)生的事情。改變 State 的唯一辦法，就是使用 Action。它會運(yùn)送數(shù)據(jù)到 Store。

4、Action Creator

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

function?addTodo(text)?{

return?{

type:?ADD_TODO,

text

}

}

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

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

5、store.dispatch()

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

const?store?=?createStore(fn);

store.dispatch({

type:?'ADD_TODO',

payload:?'Learn?Redux'

});

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

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

6、Reducer

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

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

//?...

return?new_state;

};

整個應(yīng)用的初始狀態(tài)，可以作為 State 的默認(rèn)值。下面是一個實(shí)際的例子。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函數(shù)收到名為ADD的 Action 以后，就返回一個新的 State，作為加法的計(jì)算結(jié)果。其他運(yùn)算的邏輯(比如減法)，也可以根據(jù) Action 的不同來實(shí)現(xiàn)。

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

const?store?=?createStore(reducer);

上面代碼中，createStore接受 Reducer 作為參數(shù)，生成一個新的 Store。以后每當(dāng)store.dispatch發(fā)送過來一個新的 Action，就會自動調(diào)用 Reducer，得到新的 State。

7、store.subscribe()

Store 允許使用store.subscribe方法設(shè)置監(jiān)聽函數(shù)，一旦 State 發(fā)生變化，就自動執(zhí)行這個函數(shù)。import?{?createStore?}?from?'redux';

const?store?=?createStore(reducer);

store.subscribe(listener);

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

store.subscribe方法返回一個函數(shù)，調(diào)用這個函數(shù)就可以解除監(jiān)聽。let?unsubscribe?=?store.subscribe(()?=>

console.log(store.getState())

);

unsubscribe();?

三)舉個例子

簡單計(jì)數(shù)器的例子：麻雀雖小，五臟俱全

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

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

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

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

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

請求 API

調(diào)用不純的函數(shù)，比如?Data.now()?Math.random()

那這樣的話，異步操作是如何實(shí)現(xiàn)的呢，這就需要借助中間件redux-thunk或者redux-sage在發(fā)出action到reducer接收到action之間來執(zhí)行異步操作。(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);

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。