React?Flux與Redux設計及使用原理是什么

本篇內(nèi)容主要講解“React Flux與Redux設計及使用原理是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React Flux與Redux設計及使用原理是什么”吧!

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

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

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

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

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

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

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

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

整個應用的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 擴展

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

不同的函數(shù)負責處理不同屬性，最終把它們合并成一個大的 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()進行分發(fā)。同步的情況下一切都很完美，但reducer無法處理異步的情況，那么我們就需要在action和reducer中間架起一座橋梁來處理異步

i. 中間件的由來與原理、機制

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

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

行next方法(下一步處理)，相當于中間件沒有做任何事。如果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 = ()=>{
//進行異步請求
return (dispatch,store)=>{
}
}

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

import promiseMiddleware from 'redux-promise';
const store = createStore(fetchReducer, applyMiddleware(thunk,promiseMiddleware));
const getComingSoon = ()=>{
//進行異步請求
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

下載完成之后

• 可以在瀏覽器工具欄右上角可以看到圖標（當應用可以使用該工具時，圖標變亮）

• 在頁面上右鍵可以看到 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

到此，相信大家對“React Flux與Redux設計及使用原理是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！