redux核心步驟

iKcamp 發布于2019-08-23 13:59 / 1585人閱讀

摘要：實現步驟數據和控制修改后的數據初始化和通過獲取執行監聽數據變化監聽數據變化重新渲染頁面通過觀察者模式監聽數據變化，避免沒有狀態改變的頻繁渲染首次渲染頁面示例數據和控制修改封裝起來覆蓋原對象初始化增改刪刪除特定下標用戶參考文獻小書

概念

redux是一種架構模式，可以和react、vue結合使用。

解決的問題

優雅地修改共享數據狀態，避免狀態在父子組件的連鎖改動（子組件多的話改起來麻煩）及外部改動造成的不必要（難以排除）問題，所以所有的改動強橫通過一個方法（dispatch）修改。

實現步驟

//state(數據)和action(控制修改)后的數據
function reducer (state, action) {
    /!* 初始化 state 和 switch case *!/
}

// 通過reducer獲取state
// 執行action
// 監聽數據變化
const store = createStore(reducer)

// 監聽數據變化重新渲染頁面
// 通過觀察者模式監聽數據變化，避免沒有狀態改變的頻繁渲染
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(數據)和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 // 刪除特定下標用戶
});
console.log(store.getState());

參考文獻 React.js 小書

GPU云服務器云服務器 Redux redux源碼 redux-saga react-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99889.html

Redux系列02：一個炒雞簡單的react+redux例子

摘要：前言在系列從一個簡單例子了解里面，我們已經對的核心概念做了必要的講解。接下來，同樣是通過一個簡單的例子，來講解如何將跟應用結合起來。接下來就看實際例子，一個簡單到不存在實用價值的。這部分會在后續展開前言在《Redux系列01：從一個簡單例子了解action、store、reducer》里面，我們已經對redux的核心概念做了必要的講解。接下來，同樣是通過一個簡單的例子，來講解如何將...

hidogs 2019-08-19 17:17 評論0 收藏0
Redux概念之一: Redux簡介

摘要：應用這說明并不是單指設計給用的，它是獨立的一個函數庫，可通用于各種應用。在數據流的最后，要觸發最上層組件的，然后進行整體的重新渲染工作。單純在的對象上是沒有辦法使用，要靠額外的函數庫才能這樣作，這是一定要使用類似像這種函數庫的主要原因。 Redux的官網中用一句話來說明Redux是什么: Redux是針對JavaScript應用的可預測狀態容器這句話雖然簡短，其實是有幾個涵義的: ...

cjie 2019-08-20 13:59 評論0 收藏0
react之redux狀態管理

摘要：傳統框架的缺陷傳統框架的缺陷模型視圖控制器的縮寫即視圖用戶看到并與之交互的界面。即模型是管理數據很多業務邏輯都在模型中完成。在的三個部件中，模型擁有最多的處理任務。所有的狀態，保存在一個對象里面唯一數據源。1、傳統MVC框架的缺陷模型(model)－視圖(view)－控制器(controller)的縮寫 V即View視圖：用戶看到并與之交互的界面。 M即Model模型是管理數...

J4ck_Chan 2021-11-19 11:29 評論0 收藏0
redux原來如此簡單

摘要：是狀態容器，提供可預測化的狀態管理。一般我們會使用一個常量來表示對應的值。作為純函數，內部不建議使用任何有副作用的操作，比如操作外部的變量，任何導致相同輸入但輸出卻不一致的操作。結合，其他類庫，開發步驟莫不如此。 Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。那什么是可以預測化，我的理解就是根據一個固定的輸入，必然會得到一個固定的結果。 redux是專門為...

wuyumin 2019-08-23 11:50 評論0 收藏0
Redux異步中間件

摘要：是官方文檔中用到的異步組件，實質就是一個中間件，簡單來說就是一個封裝表達式的函數，封裝的目的是延遲執行表達式。這時我們需要對一般異步中間件進行處理。曾經前端的革新是以Ajax的出現為分水嶺，現代應用中絕大部分頁面渲染會以異步流的方式進行。在Redux中，如果要發起異步請求，最合適的位置是在action creator中實現。但我們之前了解到的action都是同步情況，因此需要引入中間...

wums 2019-08-22 16:09 評論0 收藏0