redux的原理、工作流程及其應(yīng)用方式
redux原理、工作流程及其使用
- Redux對于JavaScript應(yīng)用而言是一個可預測狀態(tài)的容器。
- 換言之，它是一個應(yīng)用數(shù)據(jù)流框架，而不是傳統(tǒng)的像underscore.js或者AngularJs那樣的庫或者框架。
1、什么是redux？
redux是專門用于集中式管理狀態(tài)的javascript庫，他并不是react的插件庫。
比如你有多個組件A-E都想要用同一個組件D中的狀態(tài)：
1）像以前我們可以通過父子組件通信的方式讓父組件進行傳遞狀態(tài)，或者是讓兄弟組件之間通過訂閱發(fā)布進行通信
2）當我們使用了redux就可以直接通過讓redux進行統(tǒng)一的狀態(tài)管理，誰想要用狀態(tài)就自己去拿，省去了第一種方法的層層傳遞
2、redux的工作流程
在我們了解redux的工作流程之前我們應(yīng)該要知道redux有三個核心概念，分別為actions、store、reducers（帶s的表明可能存在多個）
1）actions
actions英文直譯過來就是行動、動作的意思，那么我們就可以猜到他表示的是“怎么做”，簡單來說actions就是一個對象，actions里面有兩個屬性分別為type和data：
type：標識屬性，值為字符串且唯一，必要屬性（你想要做什么事情data：數(shù)據(jù)屬性，值為任意類型，可選屬性（你要做事情的數(shù)據(jù)
那我們淺淺舉個栗子：
比如計算器你可以進行加1減2等操作，那么加減乘除這個操作就是你的type，數(shù)字就是你的數(shù)據(jù)
2）store
store有且只能有一個，他相當于一個最高指揮家，他負責把action動作交給對應(yīng)的reducer進行執(zhí)行，也就是說將state、action和reducer聯(lián)系在一起的對象。
3）reducer
reducer用于將store發(fā)過來的action完成并將結(jié)果返回給store，他接收兩個參數(shù)preState（舊狀態(tài)）和action（動作）并返回一個newState（新狀態(tài)）。
比如像計算器我們需要在原來的數(shù)據(jù)上進行加1的操作，那么舊狀態(tài)舊對應(yīng)原來的數(shù)據(jù)，action對應(yīng)加1的操作，返回的新狀態(tài)就是計算器加完之后重新返回的結(jié)果。
那么他的工作流程是什么樣的呢？
1）首先我們要確定我們要做什么
2）讓Action Creators創(chuàng)建action（也就是你要做的事情）
3）通過dispatch將action分發(fā)出去
4）store對要使用的reducer進行綁定，然后將action分發(fā)到對應(yīng)的reducer上
5）在reducer上進行相應(yīng)的action操作并返回結(jié)果給store
6）組件就可以通過store的API像store進行獲取操作返回的結(jié)果
3、redux的舉例說明
接下來我們會使用一個計算器的案例幫助大家更好的理解redux
1）Count組件
import store from '../../redux/store'
import { creatAdd, creatJian } from '../../redux/count_action'
export default class Count extends Component {
///相加
addCount = () => {
const { value } = this.selectValue///獲取當前選擇的值
store.dispatch(creatAdd(value * 1))
}
//相減
lessCount = () => {
const { value } = this.selectValue
store.dispatch(creatJian(value * 1))
}
render () {
return (
<div>
<h2>當前計算器的值為：{store.getState()}</h2>
<select ref={c => this.selectValue = c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={this.addCount}>相加</button>
<button onClick={this.lessCount}>相減</button>
</div>
)
}
}2）創(chuàng)建action
import { ADDCOUNT, CREATJIAN } from '../redux/constant'
export const creatAdd = data => ({ type: ADDCOUNT, data })
export const creatJian = data => ({ type: CREATJIAN, data })3）store組件
import { legacy_createStore } from 'redux'
import countReducer from './count_reducer'
///將reducer和store聯(lián)系起來
export default legacy_createStore(countReducer)4）reducer組件
import { ADDCOUNT, CREATJIAN } from './constant'
const inin = 0
export default function countReducer (pre = inin, action) {
///從action解析出type和data
const { type, data } = action
///通過類型進行匹配，判斷怎么做
switch (type) {
case ADDCOUNT:
return pre + data
case CREATJIAN:
return pre - data
default:
return pre
}
}5）contant常量
為防止出現(xiàn)拼寫錯誤 export const ADDCOUNT = 'addCount' export const CREATJIAN = 'lessCount'
6）當檢測到redux中的狀態(tài)發(fā)生變化時要進行更新渲染
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
///在入口文件進行更新渲染
store.subscribe(() => {
root.render(
<App />
)
})總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react如何向數(shù)組中追加值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了webpack 2的react開發(fā)配置實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
基于PixiJS實現(xiàn)react圖標旋轉(zhuǎn)動效
PixiJS是一個開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項目提供了極快的性能，這篇文章主要介紹了用PixiJS實現(xiàn)react圖標旋轉(zhuǎn)動效,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了React中事件的類型定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本篇文章主要介紹了react-native fetch的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了react-router6.x路由配置及導航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
react-redux中connect的裝飾器用法@connect詳解
這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了react使用echart繪制地圖,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了React Hooks如何主動更新Hooks組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11