redux的基礎(chǔ)知識(shí)點(diǎn)有哪些

本篇內(nèi)容主要講解“redux的基礎(chǔ)知識(shí)點(diǎn)有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“redux的基礎(chǔ)知識(shí)點(diǎn)有哪些”吧!

redux是什么

1.redux是一個(gè)專門用于做狀態(tài)管理的JS庫(kù)（不是react插件庫(kù)）。

2.它可以用在react, angular, vue等項(xiàng)目中， 但基本與react配合使用。

3.作用： 集中式管理react應(yīng)用中多個(gè)組件共享的狀態(tài)。

什么情況下需要使用redux

1.某個(gè)組件的狀態(tài)，需要讓其他組件可以隨時(shí)拿到，可以產(chǎn)生共享情況。

2.一個(gè)組件需要改變另一個(gè)組件的狀態(tài)，不僅局限于父子關(guān)系，而是一個(gè)項(xiàng)目中所有的組件都可以調(diào)用這個(gè)狀態(tài)或方法。

3.使用redux原則：能不用就不用， 如果不用比較吃力才考慮使用。通常用于大型項(xiàng)目，組件之間通信較為復(fù)雜的情況。小型項(xiàng)目不需要使用可以盡量不用。

redux工作流程

三個(gè)核心概念：

1.action（動(dòng)作的對(duì)象）

包含2個(gè)屬性

type：標(biāo)識(shí)屬性， 值為字符串， 唯一， 必要屬性

data：數(shù)據(jù)屬性， 值類型任意， 可選屬性

例子：{ type: ‘ADD_STUDENT’，data:{name: ‘tom’，age:18} }

2.reducer（用于初始化狀態(tài)、加工狀態(tài)）

加工時(shí)，根據(jù)舊的state和action， 產(chǎn)生新的state的純函數(shù)。

3. store（將state、action、reducer聯(lián)系在一起的對(duì)象）

使用方法

import {createStore} from 'redux'

import reducer from './reducers'

const store = createStore（reducer）

該對(duì)象的功能

1）getState（）： 得到state

2）dispatch（action）： 分發(fā)action, 觸發(fā)reducer調(diào)用， 產(chǎn)生新的state

3）subscribe（listener）： 注冊(cè)監(jiān)聽(tīng)， 當(dāng)產(chǎn)生了新的state時(shí)， 自動(dòng)調(diào)用

redux的核心API

1.createstore（）

創(chuàng)建包含指定reducer的store對(duì)象

2.store對(duì)象

作用： redux庫(kù)最核心的管理對(duì)象

它內(nèi)部維護(hù)著：state和reducer

核心方法：

1）getState（）

2）dispatch（action）

3）subscribe（listener）

具體編碼：

1）store.getState（）

2）store.dispatch（{type:‘INCREMENT’， number}）

3）store.subscribe（render）

3.applyMiddleware（）

應(yīng)用上基于redux的中間件（插件庫(kù)）

4.combineReducers（）

合并多個(gè)reducer函數(shù)

到此，相信大家對(duì)“redux的基礎(chǔ)知識(shí)點(diǎn)有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！