React 入門-redux 和 react-redux

小創發表於2021-01-24

React 將頁面元素拆分成元件,通過組裝展示資料。元件又有無狀態有狀態之分,所謂狀態,可以簡單的認為是元件要展示的資料。React 有個特性或者說是限制單向資料流,元件的狀態資料只能在元件內部修改,對於其他元件是只讀的,想要修改只能通過元件提供的介面回撥。

隨著元件數量的增多,元件間狀態資料共享的複雜性也會隨之增加,如果僅使用 React 元件內的 State 可能會導致程式的流程混亂,程式碼難以維護。

原文連結:https://www.chuonye.com/archives/react-redux.html

1. 引入 Redux

為什麼這麼說呢,我們來看一個圖:

redux

原始的 React,當最底層元件需要改變資料時,如果資料在父元件,回撥方法層層傳遞即可;如果在兄弟元件,那就需要藉助一箇中間元件,當然了也有辦法直接與兄弟元件通訊。可以想象,隨著應用複雜程度的提高,元件間通訊使用的各種直接或間接回撥,可能會導致程式碼亂成一團。

此時,Redux 就派上用場了,如上圖所示,它把應用的所有狀態-資料儲存在一個地方,並稱之為Store,元件間不直接通訊,而是把變化的資料推給 Store,需要根據狀態變化重新渲染的元件通過訂閱 Store 來實現。

Redux 在設計與實現時,遵循三大原則或者說規範限制

1.1 唯一資料來源

整個應用程式的狀態資料僅儲存在一個 Store 中,資料就儲存在一個大的物件樹(object tree)中。

1.2 只讀的 Store

唯一的 Store 也是隻讀的,應用程式無法直接修改狀態資料。Store 物件本身的 API 非常少,僅有四個方法:

  • getState() : 獲取當前狀態資料
  • dispatch(action) : 推送觸發變化
  • subscribe(listener) : 訂閱資料變化
  • replaceReducer(nextReducer)

顯而易見,沒有提供設定狀態的方法。其中的 dispatch(action) 是唯一改變資料的方法,比如:

var action = {
  type: 'ADD_USER',
  user: {name: 'chuonye.com'}
};

store.dispatch(action);

dispatch 方法會將 action 傳遞給 Redux,action 就是一個普通物件,包含觸發的操作型別以及資料。

1.3 使用純函式更改資料

Redux 接收到 action 後,會使用一個純函式來處理,這些函式被稱為 Reducers

var someReducer = function(state, action) {
  ...
  return state;
}

Reducer 接收當前的 state 和 action 作為引數,它也不能直接修改原有的資料,而是通過返回一個新的 state 來修改。

總的來說,Redux 是一個幫助應用統一管理狀態資料的工具,它遵循嚴格的單向資料流(Store 只讀)設計,使得應用的行為變得可預測且容易理解。

react-redux-stream

2. React-Redux

Redux 一般和 React 這類框架搭配使用,為了方便與 React 整合,Redux 官方提供了一個 react-redux 繫結庫。react-redux 將元件劃分為容器元件UI元件其他元件,其中:

  • 容器元件:與 Redux-Store 互動,分派 Action,監聽 state 變化,負責資料管理和業務邏輯
  • UI 元件:無狀態,負責資料的展示,樣式,排版,資料來源於 props 屬性
  • 其他元件:無法明確區分是容器還是 UI 的元件,或者本身比較簡單沒有拆分必要的元件

從整體來看,在使用上,應用程式碼分層設計,結構如下:

react-redux

我們不妨結合著資料庫,來理解下每個層次的意思,從下往上:

  • Store 可以理解成資料庫服務,其中的 State 是一個資料庫,State 物件樹的各個部分,可以理解為對應不同的
  • Reducer 就是實際對 State 增刪改的,它按邏輯拆分成多個 子reducer,分別對物件樹的不同部分或者說對不同的表進行操作,就如同一個 SQL 執行引擎
  • Action 就是一系列觸發改變的動作以及資料,就如同一條條 SQL 語句
  • 容器元件和 UI 元件就如同 Java 中設計的 DAO 和 Controller

這些設計怎麼有點熟悉,跟 Java 是越來越像了。下面簡單寫個例子,看看到底怎麼用。

3. 例項:Counter 計數器

接下來我們按照使用原生 React,使用 Redux 和使用 React-Redux的順序分別實現一個 Counter 計數器的功能。

3.1 原生 React 實現

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { value: 0 }; // 狀態資料
    }
    render() {
        return (
            <div>
                <p>state: {this.state.value}</p>
                <button onClick={() => this.handleIncrement()}>+1</button>
                <button onClick={() => this.handleDecrement()}>-1</button>
            </div>
        );
    }
    // 處理方法
    handleIncrement() {
        let curVal = this.state.value + 1;
        this.setState({value: curVal});
    }
    handleDecrement() {
        let curVal = this.state.value - 1;
        this.setState({value: curVal});
    }
}
// 渲染
ReactDOM.render(<Counter />, document.getElementById('root'))

3.2 使用 Redux 實現

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

// 接收 action 並處理,簽名:(state, action) => newState
function reducer(state = {value: 0}, action) {
    let curVal = state.value;
    switch (action.type) {
        case 'INCREMENT':
            return {value: curVal+1};
        case 'DECREMENT':
            return {value: curVal-1};
        default:
            return state;
    }
}
// 建立 Redux store
const store = createStore(reducer);

const render = () => ReactDOM.render(
    <div>
        <p>state: {store.getState().value}</p>
        {/* dispatch 通知 store 改變資料 */}
        <button onClick={()=>{store.dispatch({type: 'INCREMENT'})}}>+1</button>
        <button onClick={()=>{store.dispatch({type: 'DECREMENT'})}}>-1</button>
    </div>,
    document.getElementById('root')
)

render();
// 訂閱 store,狀態改變時更新 UI
store.subscribe(render);

3.3 使用 React-Redux 實現

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// 接收 action 並處理
function reducer(state = {value: 0}, action) {
    let curVal = state.value;
    switch (action.type) {
        case 'INCREMENT':
            return {value: curVal+1};
        case 'DECREMENT':
            return {value: curVal-1};
        default:
            return state;
    }
}
// 定義一個 UI 元件,用於展示資料
class CounterUI extends Component {
    render() {
        // 資料來源於 props
        const {value, handleIncrement, handleDecrement} = this.props;
        return (
            <div>
                <p>state: {value}</p>
                <button onClick={handleIncrement}>+1</button>
                <button onClick={handleDecrement}>-1</button>
            </div>
        );
    }
}
// 定義一個 容器元件,用於與 Redux store 互動
// 將 Redux state 按需注入到 UI 元件的 props
function mapStateToProps(state) {
    return { value: state.value }
}
  
// 將 Redux actions 按需注入到 UI 元件的 props
function mapDispatchToProps(dispatch) {
    return {
        handleIncrement: () => dispatch({type: 'INCREMENT'}),
        handleDecrement: () => dispatch({type: 'DECREMENT'})
    }
}
// 使用 connect 方法基於 UI元件 生成一個 容器元件
const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(CounterUI);

const store = createStore(reducer);

// 使用 Provider 作為根元件,使得所有子元件都能訪問到 store
ReactDOM.render(
    <Provider store={store}>
      <CounterContainer />
    </Provider>,
    document.getElementById('root')
)

4. 小結

Redux 和 React-Redux 專門設計了約束和約定,導致程式碼量不見得減少,甚至還可能增加了。簡單的專案看不出有什麼優勢,但在構建一定規模的企業級專案時,這些約束和條條框框,會有利於專案的維護和管理。正如 Java,有些人認為過於囉嗦,但這正是它嚴謹的體現!

下一篇將會結合 antd UI框架模仿實現官方提供的購物車例項。

相關文章