五分鐘入門Redux(Redux教程)

學習背景:

我最近在更新師兄之前用React寫的項目,該項目中各組件的狀態依賴關系非常復雜,為了便于管理組件的狀態,師兄使用了Redux。我最近剛轉React,此前沒有用過Redux,借這個難得的機會,我學習了Redux并對其相關知識點進行了梳理。

一 Redux解決了什么問題?

學習react的朋友都知道組件化是react最擅長的方面,但是在實際開發中,隨著應用復雜度地不斷提升,組件之間的狀態通信變得越來越多,組件之間的耦合也變得越來越重。

這時,Redux誕生了,Redux對所有“組件”說:“你們不要在一對一地寫信通知狀態了,我是組件群的‘通信云盤’,你們把公共狀態存在我這,只要某個狀態一改變,各組件都能取到狀態的最新值。“

二 使用Redux需掌握哪些最精髓的API?

(1)store: store對象是保存公共數據的地方,一個應用只能創建一個store。下面是創建store方式:

import { createStore } from 'redux';

const store = createStore(function);

(2)state:state是store映射的數據集合,一個state 只對應一個view,下面是創建state方法:

import { createStore } from 'redux';

const store = createStore(function);

const state = store.getState(); // 通過store.getState()拿到state

(3)action:state和view捆綁在一起,view發生變化時會用action發出通知。action是改變state的唯一方法,它本質是一個對象,必須要寫一個代表action名稱的屬性——type。除此之外,其他屬性可以自由設置,下面是action對象示例:

const action = {?

? type: 'student_age',?

? age: 12

};

(4)store.dispatch():store.dispatch()是 view 發出 action 的唯一方法,也可以理解為發射action通知的唯一方法。下面是使用store.dispatch()的代碼示例:

store.dispatch({

? type: 'student_age',

? age: 12

});

(5)reducer:reducer是一個計算state的函數,接受兩個參數,當前的state和action。當store收到action通知后,一定要返回一個全新的state,這樣view才能發生變化。store接收到action傳來的數據,然后根據邏輯計算數據,這個過程就稱為reducer。下面是reduer的代碼示例:

import { createStore } from 'redux';

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

? switch (action.type) {? ?

? ? case 'student_age':? ? ?

? ? ? return state + action.age;? ?

? ? default: ? ? ?

? ? ? return state;?

}};

const store = createStore(reducer); // 生成store時傳入reducer

實際開發中要在生成store時傳入reducer,這樣store.dispatch()會自動觸發reducer函數執行。

(6)store.subscribe():store.subscribe()監聽state變化,state一旦變化就自動觸發該函數。下面是它的代碼示例:

import { createStore } from 'redux';

const store = createStore(reducer);

store.subscribe(listener);

三 Redux的運行原理是什么?

redux運行原理圖

四 store有哪些重要方法?

store重要方法
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、什么情況需要redux? 1、用戶的使用方式復雜 2、不同身份的用戶有不同的使用方式(比如普通用戶和管...
    初晨的筆記閱讀 2,053評論 0 11
  • 學習必備要點: 首先弄明白,Redux在使用React開發應用時,起到什么作用——狀態集中管理 弄清楚Redux是...
    賀賀v5閱讀 8,942評論 10 58
  • 本文將開始詳細分析如何搭建一個React應用架構。 一. 前言 現在已經有很多腳手架工具,如create-reac...
    字節跳動技術團隊閱讀 4,398評論 1 23
  • 前言 本文 有配套視頻,可以酌情觀看。 文中內容因各人理解不同,可能會有所偏差,歡迎朋友們聯系我討論。 文中所有內...
    珍此良辰閱讀 11,942評論 23 111
  • http://gaearon.github.io/redux/index.html ,文檔在 http://rac...
    jacobbubu閱讀 80,055評論 35 198