資訊專欄INFORMATION COLUMN
摘要：實現(xiàn)步驟數(shù)據(jù)和控制修改后的數(shù)據(jù)初始化和通過獲取執(zhí)行監(jiān)聽數(shù)據(jù)變化監(jiān)聽數(shù)據(jù)變化重新渲染頁面通過觀察者模式監(jiān)聽數(shù)據(jù)變化，避免沒有狀態(tài)改變的頻繁渲染首次渲染頁面示例數(shù)據(jù)和控制修改封裝起來覆蓋原對象初始化增改刪刪除特定下標(biāo)用戶參考文獻(xiàn)小書
概念
redux是一種架構(gòu)模式，可以和react、vue結(jié)合使用。
解決的問題優(yōu)雅地修改共享數(shù)據(jù)狀態(tài)，避免狀態(tài)在父子組件的連鎖改動（子組件多的話改起來麻煩）及外部改動造成的不必要（難以排除）問題，所以所有的改動強橫通過一個方法（dispatch）修改。
實現(xiàn)步驟//state(數(shù)據(jù))和action(控制修改)后的數(shù)據(jù)
function reducer (state, action) {
/!* 初始化 state 和 switch case *!/
}
// 通過reducer獲取state
// 執(zhí)行action
// 監(jiān)聽數(shù)據(jù)變化
const store = createStore(reducer)
// 監(jiān)聽數(shù)據(jù)變化重新渲染頁面
// 通過觀察者模式監(jiān)聽數(shù)據(jù)變化，避免沒有狀態(tài)改變的頻繁渲染
store.subscribe(() => renderApp(store.getState()))
// 首次渲染頁面
renderApp(store.getState())
示例
const usersReducer = (state, action) => {
if (!state) return [];
switch (action.type) {
case "ADD_USER":
return [...state, action.user]
case "DELETE_USER":
return [...state.slice(0, action.index), ...state.slice(action.index + 1)]
case "UPDATE_USER":
let user = {
...state[action.index],
...action.user,
}
return [
...state.slice(0, action.index),
user,
...state.slice(action.index + 1),
]
default:
return state
}
}
//state(數(shù)據(jù))和dispatch(控制修改)封裝起來
function createStore (reducer) {
let state = null
const listeners = []
const subscribe = (listener) => listeners.push(listener)
const getState = () => state
const dispatch = (action) => {
state = reducer(state, action) // 覆蓋原對象
// console.log(listeners)
listeners.forEach((listener) => {
// console.log(listener)
listener()
})
}
dispatch({}) // 初始化 state
return { getState, dispatch, subscribe }
}
const store = createStore(usersReducer);
console.log(store.getState());
//增
store.dispatch({
type: "ADD_USER",
user: {
username: "Lucy",
age: 12,
gender: "female"
}
});
console.log(store.getState());
//改
store.dispatch({
type: "UPDATE_USER",
index: 0,
user: {
username: "Tomy",
age: 12,
gender: "male"
}
});
console.log(store.getState());
//刪
store.dispatch({
type: "DELETE_USER",
index: 0 // 刪除特定下標(biāo)用戶
});
console.log(store.getState());
參考文獻(xiàn) React.js 小書
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99889.html
摘要：前言在系列從一個簡單例子了解里面，我們已經(jīng)對的核心概念做了必要的講解。接下來，同樣是通過一個簡單的例子，來講解如何將跟應(yīng)用結(jié)合起來。接下來就看實際例子，一個簡單到不存在實用價值的。這部分會在后續(xù)展開 前言 在《Redux系列01：從一個簡單例子了解action、store、reducer》里面，我們已經(jīng)對redux的核心概念做了必要的講解。接下來，同樣是通過一個簡單的例子，來講解如何將...
摘要：應(yīng)用這說明并不是單指設(shè)計給用的，它是獨立的一個函數(shù)庫，可通用于各種應(yīng)用。在數(shù)據(jù)流的最后，要觸發(fā)最上層組件的，然后進(jìn)行整體的重新渲染工作。單純在的對象上是沒有辦法使用，要靠額外的函數(shù)庫才能這樣作，這是一定要使用類似像這種函數(shù)庫的主要原因。 Redux的官網(wǎng)中用一句話來說明Redux是什么: Redux是針對JavaScript應(yīng)用的可預(yù)測狀態(tài)容器 這句話雖然簡短，其實是有幾個涵義的: ...
摘要：傳統(tǒng)框架的缺陷傳統(tǒng)框架的缺陷模型視圖控制器的縮寫即視圖用戶看到并與之交互的界面。即模型是管理數(shù)據(jù)很多業(yè)務(wù)邏輯都在模型中完成。在的三個部件中，模型擁有最多的處理任務(wù)。所有的狀態(tài)，保存在一個對象里面唯一數(shù)據(jù)源。1、傳統(tǒng)MVC框架的缺陷 模型(model)－視圖(view)－控制器(controller)的縮寫 V即View視圖：用戶看到并與之交互的界面。 M即Model模型是管理數(shù)...
摘要：是狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。一般我們會使用一個常量來表示對應(yīng)的值。作為純函數(shù)，內(nèi)部不建議使用任何有副作用的操作，比如操作外部的變量，任何導(dǎo)致相同輸入但輸出卻不一致的操作。結(jié)合，其他類庫，開發(fā)步驟莫不如此。 Redux 是 JavaScript 狀態(tài)容器， 提供可預(yù)測化的狀態(tài)管理。 那什么是可以預(yù)測化，我的理解就是根據(jù)一個固定的輸入，必然會得到一個固定的結(jié)果。 redux是專門為...
摘要：是官方文檔中用到的異步組件，實質(zhì)就是一個中間件，簡單來說就是一個封裝表達(dá)式的函數(shù)，封裝的目的是延遲執(zhí)行表達(dá)式。這時我們需要對一般異步中間件進(jìn)行處理。 曾經(jīng)前端的革新是以Ajax的出現(xiàn)為分水嶺，現(xiàn)代應(yīng)用中絕大部分頁面渲染會以異步流的方式進(jìn)行。在Redux中，如果要發(fā)起異步請求，最合適的位置是在action creator中實現(xiàn)。但我們之前了解到的action都是同步情況，因此需要引入中間...
閱讀 1001·2023-04-26 02:49
閱讀 1207·2021-11-25 09:43
閱讀 2579·2021-11-18 10:02
閱讀 2946·2021-10-18 13:32
閱讀 1305·2019-08-30 13:54
閱讀 2108·2019-08-30 12:58
閱讀 3039·2019-08-29 14:06
閱讀 2190·2019-08-28 18:10
