【React】react學習筆記13-Redux（部分文案摘抄自官網）

官網：

https://www.redux.org.cn/

目的：

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。 (若是你須要一個 WordPress 框架，請查看 Redux Framework。)

可讓你構建一致化的應用，運行於不一樣的環境（客戶端、服務器、原生應用），而且易於測試。不只於此，它還提供 超爽的開發體驗，好比有一個時間旅行調試器能夠編輯後實時預覽。

Redux 除了和 React 一塊兒用外，還支持其它界面庫。 它體小精悍（只有2kB，包括依賴）。

三大原則：

三大原則

Redux 能夠用這三個基本原則來描述：

單一數據源

整個應用的 state 被儲存在一棵 object tree 中，而且這個 object tree 只存在於惟一一個 store 中。

這讓同構應用開發變得很是容易。來自服務端的 state 能夠在無需編寫更多代碼的狀況下被序列化並注入到客戶端中。因爲是單一的 state tree ，調試也變得很是容易。在開發中，你能夠把應用的 state 保存在本地，從而加快開發速度。此外，受益於單一的 state tree ，之前難以實現的如「撤銷/重作」這類功能也變得垂手可得。

State 是隻讀的

惟一改變 state 的方法就是觸發 action，action 是一個用於描述已發生事件的普通對象。

這樣確保了視圖和網絡請求都不能直接修改 state，相反它們只能表達想要修改的意圖。由於全部的修改都被集中化處理，且嚴格按照一個接一個的順序執行，所以不用擔憂 race condition 的出現。 Action 就是普通對象而已，所以它們能夠被日誌打印、序列化、儲存、後期調試或測試時回放出來。

使用純函數來執行修改

爲了描述 action 如何改變 state tree ，你須要編寫 reducers。

Reducer 只是一些純函數，它接收先前的 state 和 action，並返回新的 state。剛開始你能夠只有一個 reducer，隨着應用變大，你能夠把它拆成多個小的 reducers，分別獨立地操做 state tree 的不一樣部分，由於 reducer 只是函數，你能夠控制它們被調用的順序，傳入附加數據，甚至編寫可複用的 reducer 來處理一些通用任務，如分頁器。

就是這樣，如今你應該明白 Redux 是怎麼回事了。

下載：

npm install --save redux

使用：

 

如上圖，state存在於頂層組件Page中，組件從Store中獲取state數據。

更新數據時將新數據存放至Action，使用API的Dispacher轉發請求更新Store。

demo以下：

reducers:

/**
 * reducers
 * 經過 reducers 做爲參數 構建 Store 對象
 * @param state  原來的狀態對象
 * @param action 實際操做對象，裏面包含待更新的新值以及操做類型等信息。eg：{event:'ADD',data:100}
 */
export function count(state=0 ,action) {
    let val=action.data;
    return val;

}

頂層組件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Main from './components/Redux/Mian';
import * as serviceWorker from './serviceWorker';

//引入redux
import {createStore} from 'redux';
//引入reducers（上面的代碼）
import {count}  from './components/reduxs/reducers'
//建立store對象
const store = createStore(count)
//監聽狀態改變
store.subscribe(() =>
    console.log("狀態被改變",store.getState())
);
//將store傳入下層組件
ReactDOM.render(<Main store={store} />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

操做store對象的下層組件：

import React,{Component} from 'react';



export default class Main  extends Component{
    constructor(props){
        super(props);
        //初始化組件中Action的值爲：{type:'in',data:0}
        this.props.store.dispatch({type:'in',data:0})
    }

    add=()=>{
        //獲取state的值
        let val = this.props.store.getState();
        val=val+1;
        console.log(val)
        //更新state的值
        this.props.store.dispatch({type:'in',data:val})

    }

    render() {

        return (
            <div>
                <button onClick={
                    () => {
                        this.add()
                    }
                }>Click</button>

            </div>
        )
    }

}

點擊效果：