Flux 是一種架構(gòu)思想，專門解決軟件的結(jié)構(gòu)問(wèn)題。它跟MVC架構(gòu)是同一類東西，但是更加簡(jiǎn)單和清晰。Flux存在多種實(shí)現(xiàn)(至少15種)

Facebook Flux是用來(lái)構(gòu)建客戶端Web應(yīng)用的應(yīng)用架構(gòu)。它利用單向數(shù)據(jù)流的方式來(lái)組合React

中的視圖組件。它更像一個(gè)模式而不是一個(gè)正式的框架，開(kāi)發(fā)者不需要太多的新代碼就可以快速的上手Flux。

Facebook Flux是用來(lái)構(gòu)建客戶端Web應(yīng)用的應(yīng)用架構(gòu)。它利用單向數(shù)據(jù)流的方式來(lái)組合React

中的視圖組件。它更像一個(gè)模式而不是一個(gè)正式的框架，開(kāi)發(fā)者不需要太多的新代碼就可以快速的上手Flux。

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

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

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

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

State是只讀的

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

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

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

2. redux工作流

Redux工作流程：

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

3. redux原理解析

store 是通過(guò) createStore創(chuàng)建出來(lái)的，
所以他的結(jié)構(gòu)
export const createStore =
function(reducer, initialState) {
return {
dispatch, 用于action的分發(fā)，
改變store里面的state（currentState =
reducer(currentState,action)） ，并
在內(nèi)部遍歷subcribe注冊(cè)的監(jiān)聽(tīng)器
subscribe,注冊(cè)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所處理的屬性之間沒(méi)有聯(lián)系，我們可以把 Reducer 函數(shù)拆分。

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

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

5. redux中間件

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

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

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

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

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

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

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

ii. 常用異步中間件：

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

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

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

import promiseMiddleware from 'redux-promise';
const store = createStore(fetchReducer, applyMiddleware(thunk,promiseMiddleware));
const getComingSoon = ()=>{
//進(jìn)行異步請(qǐng)求
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)用可以使用該工具時(shí)，圖標(biāo)變亮）
• 在頁(yè)面上右鍵可以看到 Redux DevTools 選項(xiàng)
• 打開(kāi)控制臺(tái)，在菜單欄可以找到 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è)計(jì)及使用原理的文章就介紹到這了,更多相關(guān)React Flux與Redux內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論