一、什麼是redux：

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。可以讓你構建一致化的應用，運行於不同的環境（客戶端、伺服器、原生應用），並且易於測試。Redux 除了和 React 一起用外，還支援其它介面庫。 它體小精悍（只有2kB，包括依賴）。

二、安裝與引入：

npm install --save redux //安裝

import { createStore } from 'redux' //引入

三、redux三大原則：

單一資料來源、state是隻讀的，使用純函式來執行修改。

四、使用redux：

當安裝好redux包並引入以後，我們通過creteStore(reducer)建立一個store狀態機，用於狀態管理。

reducer是一個純函式【純函式即返回值只有傳入的引數決定】，reducer(state,action)有2個引數,state為當前的狀態，action 就是一個描述“發生了什麼”的普通物件，reducer中通過switch流程控制語句判斷action.type的值，來更改state。

通過使用store.dispatch(action)來觸發aciton的改變，然後通過store.subscribe(()=>{}),來手動訂閱更新，當store.dispatch(action)後，就會觸發store.subscribe。通過使用store.getState()獲取當前store中state狀態。

1、State：

1.1、DomainState：服務端返回的State；
1.2、UI State：關於當前元件的State；
1.3、App State：全域性的State；

2、Action事件：

2.1、本質就是一個JS物件；
2.2、必須包含type屬性；
2.3、只是描述了有事情要發生，並沒有描述如何去更新State；

3、 Reducer：

3.1、本質就是函式；
3.2、響應傳送過來的Action；
3.3、函式接收兩個引數，第一個是初始化State，另一個是傳送過來的Action；
3.4、必須要有return返回值；

4、Store：

Store就是把action與reducer聯絡到一起的物件。

Import {createStore} from ‘redux’

const store = createStore(傳遞的reducer)

五、使用：

專案結構如下：

​

1、建立一個Action：

1.1、在根目錄下建立一個資料夾action，在action下建立一個index.js檔案用來構建Action：
const sendAction = () => {...} ；
1.2、在action建立函式裡面利用return返回一個action物件，注意要攜帶type屬性：
const sendAction = () => {return {type: ‘send_action’, value: ‘傳送了一個action’}}
1.3、把這個action建立函式進行匯出：

module.exports = { sendAction }

程式碼：

constsendAction=()=>{
return{
type:'send_type',
value:'這是一個action'
}
}

module.exports={
sendAction
}

2、建立一個Reducer：

2.1、在根目錄下建立一個reducer目錄，在reducer目錄下建立一個index.js檔案用來構建reducer，注意reducer要有兩個接收函式：

const rootReducer = (state, action) => {...}

2.2、第一個引數是預設狀態，我們可以定義一個初始化的state，然後進行賦值：

const initState = {value: ‘預設值’}
const rootReducer = (state=initState , action) => {...}

2.3、在函式裡面判斷第二個引數action的type值是否是我們需要傳送的，如果是的話我們可以通過return返回新的state；
2.4、把reducer進行匯出；

程式碼：

constinitState={
value:"預設值"
}

constreducer=(state=initState,action)=>{
switch(action.type){
case"send_type":
returnObject.assign({},state,action);
default:
returnstate;
}
}

module.exports={
reducer
}

3、構建Store：

3.1、在根目錄下建立store資料夾，在store資料夾下建立index.js檔案來構建store，注意createStore函式裡面第一個引數是reducer：

import {createStore} from ‘redux’
// 在此匯入建立的reducer
const store = createStore(reducer)

3.2、createStore返回值就是我們建立的store；
3.3、將建立的store進行匯出；

程式碼：

import{createStore}from'redux'
import{reducer}from'../reducer'

conststore=createStore(reducer);

exportdefaultstore;

4、在元件中使用：

4.1、給元件ButtonCom.js中的button按鈕繫結一個點選事件；
4.2、在元件一載入完畢的時候我們通過store來進行監聽器的註冊，返回值可以用來登出監聽：

this.unSubscribe = store.subscribe(()=>{...})

4.3、在點選事件函式處理中通過store.dispatch來發送一個action：

handle = () => {
store.dispatch(sendAction());
}

程式碼：

importReactfrom'react'
import{Button}from'antd';
import{RedoOutlined}from'@ant-design/icons';
importstorefrom'./store'
import{sendAction}from'./action'

exportdefaultclassMenuComextendsReact.Component{
componentDidMount(){
store.subscribe(()=>{
this.setState({},function(){
console.log("subscribestore.getState()");
console.log(store.getState());
});
})
}

handleClick=()=>{
constaction=sendAction();
store.dispatch(action);
}

render(){
return(<>
<Buttontype="primary"icon={<RedoOutlined/>}ghostonClick={()=>this.handleClick()}>修改</Button>
<div>{store.getState().value}</div>
</>)
}
}

六、總結：

​