快捷導(dǎo)航

React?Flux與Redux設(shè)計及使用原理

更新時間：2023年03月16日 10:01:41 作者：糖^O^

這篇文章主要介紹了React?Flux與Redux設(shè)計及使用，Redux最主要是用作應(yīng)用狀態(tài)的管理。簡言之，Redux用一個單獨的常量狀態(tài)樹（state對象）保存這一整個應(yīng)用的狀態(tài)，這個對象不能直接被改變

Redux最主要是用作應(yīng)用狀態(tài)的管理。簡言之，Redux用一個單獨的常量狀態(tài)樹（state對象）保存這一整個應(yīng)用的狀態(tài)，這個對象不能直接被改變。當(dāng)一些數(shù)據(jù)變化了，一個新的對象就會被創(chuàng)建（使用actions和reducers），這樣就可以進(jìn)行數(shù)據(jù)追蹤，實現(xiàn)時光旅行。

1. redux介紹及設(shè)計和使用的三大原則

單一數(shù)據(jù)源

整個應(yīng)用的state被儲存在一棵object tree中，并且這個object tree只存在于唯一一個store中

State是只讀的

唯一改變state的方法就是觸發(fā)action，action是一個用于描述已發(fā)生事件的普通對象.

使用純函數(shù)來執(zhí)行修改

描述action如何改變staet tree,需要編寫reducers.

2. redux工作流

Redux工作流程：

View在redux中會派發(fā)action方法 action通過store的dispatch方法會派發(fā)給store
store接收action，連同之前的state，一起傳遞給reducer reducer返回新的數(shù)據(jù)給store
store去改變自己的state

3. redux原理解析

store 是通過 createStore創(chuàng)建出來的，
所以他的結(jié)構(gòu)
export const createStore =
function(reducer, initialState) {
return {
dispatch, 用于action的分發(fā)，
改變store里面的state（currentState =
reducer(currentState,action)） ，并
在內(nèi)部遍歷subcribe注冊的監(jiān)聽器
subscribe,注冊listener，
store里面state發(fā)生改變后，執(zhí)行該
listener
getState, 取store里面的
state
}
}
function createStore(reducer){
var list = [];
var state =reducer();
function subscribe(callback){
list.push(callback);
}
function dispatch(data){
state =
reducer(state,data);
for(var i in list){
list[i]();
}
}
function getState(){
return state;
}
return {
subscribe,
dispatch,
getState
}
}

4. reducer 擴(kuò)展

如果不同的action所處理的屬性之間沒有聯(lián)系，我們可以把 Reducer 函數(shù)拆分。

不同的函數(shù)負(fù)責(zé)處理不同屬性，最終把它們合并成一個大的 Reducer 即可

import {combineReducers} from "redux";
const reducer = combineReducers({
a: functionA,
b: functionB,
c: functionC
})
訪問：
(state)=>{
return {
kerwinstate:state.a (不同的命名空間)
}
}

5. redux中間件

在redux里，action僅僅是攜帶了數(shù)據(jù)的普通js對象,action creator返回的值是這個action類型的對象。

然后通過store.dispatch()進(jìn)行分發(fā)。同步的情況下一切都很完美，但reducer無法處理異步的情況，那么我們就需要在action和reducer中間架起一座橋梁來處理異步

i. 中間件的由來與原理、機(jī)制

export default function thunkMiddleware({ dispatch, getState }) {
return next => action =>
typeof action === 'function' ?
action(dispatch, getState) :
next(action);
}

這段代碼的意思是，中間件這個橋梁接受到的參數(shù)action，如果不是function則和過去一樣直接執(zhí)

行next方法(下一步處理)，相當(dāng)于中間件沒有做任何事。如果action是function，則先執(zhí)行action，

action的處理結(jié)束之后，再在action的內(nèi)部調(diào)用dispatch。

ii. 常用異步中間件：

redux-thunk (store.dispatch參數(shù)可以是一個function)

import thunk from 'redux-thunk';
import {applyMiddleware} from "redux";
const store = createStore(fetchReducer, applyMiddleware(thunk));
const getComingSoon = ()=>{
//進(jìn)行異步請求
return (dispatch,store)=>{
}
}

redux-promise (store.dispatch參數(shù)可以是一個promise對象)

import promiseMiddleware from 'redux-promise';
const store = createStore(fetchReducer, applyMiddleware(thunk,promiseMiddleware));
const getComingSoon = ()=>{
//進(jìn)行異步請求
return axios.get(`****`).then(res=>{
return {
type:"cominglist",
info:res.data.data
}
})
}

6. Redux DevTools Extension

redux-devtools-extension 的使用

插件安裝

$ npm install redux-devtools-extension -D

下載完成之后

可以在瀏覽器工具欄右上角可以看到圖標(biāo)（當(dāng)應(yīng)用可以使用該工具時，圖標(biāo)變亮）
在頁面上右鍵可以看到 Redux DevTools 選項
打開控制臺，在菜單欄可以找到 Redux 菜單欄

import { createStore, compose} from 'redux'
import reducer from './reducer'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers())
export default store

到此這篇關(guān)于React Flux與Redux設(shè)計及使用原理的文章就介紹到這了,更多相關(guān)React Flux與Redux內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: