redux學(xué)習(xí)(上)

依照慣例累奈,開(kāi)頭先放出redux中文文檔地址

使用react當(dāng)然要配套學(xué)習(xí)redux,本文就對(duì)redux學(xué)習(xí)進(jìn)行一個(gè)總結(jié)卖漫。

redux的作用:簡(jiǎn)言之就是一整套框架幫助管理狀態(tài)(state)费尽,至于狀態(tài)管理的最佳實(shí)踐這應(yīng)該是另一個(gè)很大的話題了,這里就不多討論了羊始,對(duì)于初次使用redux的用戶而言最簡(jiǎn)單的建議就是“先接受框架提供的方式旱幼,當(dāng)你覺(jué)得完全理解了這些后再考慮按自己的思路優(yōu)化、改進(jìn)”突委。

redux三大基礎(chǔ)概念

這里我們改變一下文檔的介紹順序(文檔可能是按首字母排序的)柏卤,我按照我認(rèn)為比較容易理解的思路敘述一遍。

Store

首先匀油,使用redux管理狀態(tài)(state)缘缚,那么state到底放在哪兒維護(hù)呢?所有的statestate樹(shù))都放在store中敌蚜,而且是一個(gè)單一的store桥滨。
創(chuàng)建store可以通過(guò)redux提供的API createStore

createStore(reducer, [preloadedState], enhancer)
reducer(Function):接收兩個(gè)參數(shù),分別是當(dāng)前state樹(shù)和要處理的action
[preloadedState] (any):可選參數(shù)弛车,給定初始state
enhancer(Function):返回的還是store creator

例子:

import {createStore} from 'redux';
import  todos from './reducers'; 
let store = createStore(todos, ['use Redux']);

store提供幾個(gè)API齐媒,讓我們操作state

getState():獲取state
dispatch(action):更新state
subscribe(listener):注冊(cè)監(jiān)聽(tīng)器
subscribe(listener):返回的函數(shù)注銷監(jiān)聽(tīng)器

PS:請(qǐng)?zhí)貏e注意這個(gè)函數(shù)接收的第一個(gè)參數(shù)是reducer,意味著創(chuàng)建一個(gè)store我們必須提供的是reducer

Reducer

reducer是一個(gè)純函數(shù)纷跛,接收舊的 stateaction喻括,返回新的 state

(previousState, action) => newState

簡(jiǎn)單地闡述一下贫奠,reducer函數(shù)的奧義就是傳入一個(gè)state然后根據(jù)action來(lái)返回新的state唬血。
有一個(gè)要點(diǎn),返回的state不是通過(guò)修改原state得到的唤崭,需要返回的state應(yīng)該是在副本上修改的結(jié)果拷恨。

另外,reducer可以拆分谢肾,最推薦的做法就是創(chuàng)建小的reducer腕侄,然后通過(guò)combineReducers()把小reducer合并。

Action

action 本質(zhì)上是 JavaScript 普通對(duì)象。
action中會(huì)有一個(gè)type屬性兜挨,作用就是觸發(fā)特定的action膏孟。

例子:
最簡(jiǎn)單的action可以只定義一個(gè)字符串

const action = 'start';

常見(jiàn)一點(diǎn)的會(huì)是一個(gè)對(duì)象

{
 type: TOGGLE_TODO,
 index: 5
}

還有action創(chuàng)建函數(shù),返回一個(gè)action對(duì)象

function addTodo(text) {
    return {
       type: ADD
       text
   }
}

action創(chuàng)建完成后可以綁定給一個(gè)函數(shù)拌汇,后續(xù)就可以直接調(diào)用這個(gè)函數(shù)

const boundDispatchAddTodo = (text) => {dispatch(addTodo(text))};
···
boundDispatchAddTodo(text);

(未完待續(xù))

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末柒桑,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子噪舀,更是在濱河造成了極大的恐慌魁淳,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件与倡,死亡現(xiàn)場(chǎng)離奇詭異界逛,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)纺座,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門(mén)息拜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人净响,你說(shuō)我怎么就攤上這事少欺。” “怎么了馋贤?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵赞别,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我配乓,道長(zhǎng)仿滔,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任犹芹,我火速辦了婚禮崎页,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘羽莺。我一直安慰自己实昨,他們只是感情好洞豁,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布盐固。 她就那樣靜靜地躺著,像睡著了一般丈挟。 火紅的嫁衣襯著肌膚如雪刁卜。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,185評(píng)論 1 284
  • 那天曙咽,我揣著相機(jī)與錄音蛔趴,去河邊找鬼。 笑死例朱,一個(gè)胖子當(dāng)著我的面吹牛孝情,可吹牛的內(nèi)容都是我干的鱼蝉。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼箫荡,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼魁亦!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起羔挡,我...
    開(kāi)封第一講書(shū)人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤醇锚,失蹤者是張志新(化名)和其女友劉穎专酗,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嗦哆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了神汹。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片曹仗。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖军掂,靈堂內(nèi)的尸體忽然破棺而出喉钢,到底是詐尸還是另有隱情,我是刑警寧澤良姆,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布肠虽,位于F島的核電站,受9級(jí)特大地震影響玛追,放射性物質(zhì)發(fā)生泄漏税课。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一痊剖、第九天 我趴在偏房一處隱蔽的房頂上張望韩玩。 院中可真熱鬧,春花似錦陆馁、人聲如沸找颓。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)击狮。三九已至,卻和暖如春益老,著一層夾襖步出監(jiān)牢的瞬間彪蓬,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工捺萌, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留档冬,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像酷誓,于是被迫代替她去往敵國(guó)和親披坏。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)必備要點(diǎn): 首先弄明白盐数,Redux在使用React開(kāi)發(fā)應(yīng)用時(shí)刮萌,起到什么作用——狀態(tài)集中管理 弄清楚Redux是...
    賀賀v5閱讀 8,877評(píng)論 10 58
  • http://gaearon.github.io/redux/index.html ,文檔在 http://rac...
    jacobbubu閱讀 79,902評(píng)論 35 198
  • 一娘扩、什么情況需要redux着茸? 1、用戶的使用方式復(fù)雜 2琐旁、不同身份的用戶有不同的使用方式(比如普通用戶和管...
    初晨的筆記閱讀 2,013評(píng)論 0 11
  • 做React需要會(huì)什么灰殴? react的功能其實(shí)很單一敬特,主要負(fù)責(zé)渲染的功能,現(xiàn)有的框架牺陶,比如angular是一個(gè)大而...
    蒼都閱讀 14,740評(píng)論 1 139
  • 前言 本文 有配套視頻伟阔,可以酌情觀看。 文中內(nèi)容因各人理解不同掰伸,可能會(huì)有所偏差皱炉,歡迎朋友們聯(lián)系我討論。 文中所有內(nèi)...
    珍此良辰閱讀 11,894評(píng)論 23 111