Redux概述

Redux是一個用於JavaScript狀態容器，提供可預測化的狀態管理。
Redux可以構建一致化的應用，運行於不同的環境並且易於測試。

Redux三大核心

• 單一數據源
  整個應用的state被存儲在一個object tree中，並且這個object tree只存在於唯一一個store中。
  

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

• 使用純函數來執行修改
  為了描述action如何改變state tree，需要編寫reducers。
  Reducers只是一個純函數，它接收先前的state和action，並且返回新的state。可以複用，可以控制順序，傳入附加參數。

Redux組成

State狀態

就是我們傳送的數據。

Action事件

Action是把數據從應用傳到store的載體，它是store數據的唯一來源，一般來說，我們可以通過store.dispatch()將action傳遞給store。
Action本質就是一個js對象，對象內部必須要有一個type屬性來錶示要執行的動作，多數情况下，type會被定義成字符串常量。但在項目中，更多會用action創建函數。
它只是描述了有事情要發生，並沒有描述如何去更新state。

Reducer

Reducer本質就是一個函數，它用來響應發送過來的actions，經過處理，把state發送給Store。
在Reducer函數中，需要return返回值，這樣Store才能接收到數據。
函數會接收兩個參數，第一個參數是初始化state，第二個參數是action。

Store

Store就是把action與reducer聯系到一起的對象。
主要職責：

• 維持應用的state
• 提供getState()方法獲取state
• 提供dispatch()發送action
• 通過subscribe()來注册監聽
• 通過subscribe()返回值來注銷監聽

流程

• 創建action對象（需要包含type屬性）

const sendAction = ()=> {
    
    return {
    
        type:'send',
        value:'我是一個action'
    }
}

• 創建reducer處理（需要有返回值）

//創建reducer 純函數 處理action
const initState = {
    
    value:'默認值'
}
const reducer = (state=initState.value,action)=> {
    
    //console.log('reducer:',state,action)
    switch (action.type) {
    
        case 'send':
            return action.value
        default:
            return state
    }
}

• 通過createStore()構建store接收reducer

//構建store
const store = createStore(reducer)
export default store

• 組件發送action對象
• 通過store.subscribe()監聽獲取新的狀態getState()

export default class Home extends Component {
    
    handle = ()=> {
    
        //發送action對象
        const action = sendAction()
        store.dispatch(action)
    }
    componentDidMount() {
    
        //監聽獲取新的狀態
        store.subscribe(()=> {
    
            //console.log('sub',store.getState())
            this.setState({
    })
        })
    }

    render() {
    
        return (
            <div>
                <button onClick={
    this.handle}>點我</button>
                <div>{
    store.getState()}</div>
            </div>

        )
    }
}

React-redux

react-redux是Redux官方給出的用於配合React的綁定庫。
react-redux能够使React組件從Redux store中很方便的讀取數據，並且向store中分發actions以此來更新數據。
react-redux有兩個重要的組成部分：provider、connect。

Provider

Provider包裹在根組件最外層，使所有的子組件都能够拿到State。
Provider接收store作為props，通過context往下傳遞，這樣react中任何組件都可以通過context獲取到store。

connect

Provider內部組件如果想要使用到state中的數據，就必須要connect進行一層包裹封裝，要被connect進行加强。
connect就是方便我們組件能够獲取到store中的state。

流程

發送方：

import React,{
    Component} from "react";
import {
    connect} from "react-redux";

//發送方
class Index extends Component {
    
    handle = ()=> {
    
        //拿到並發送action
        console.log(this.props)
        this.props.sendAction()
    }

    render() {
    
        return (
            <div>
                <button onClick={
    this.handle}>+</button>
            </div>
        );
    }
}

//函數必須有返回值
//通過connext將方法的返回值傳遞給內部
const map = dispatch=> {
    
    return {
    
        sendAction: () => {
    
            dispatch({
    
                type:'add'
            })
        }
    }
}

//connect第一個括號參數第一個是接收的 第二個是發送的
//第二個括號是加强的組件
export default connect(null,map)(Index)

reducer：

const init = {
    
    count: 0
}

const reducer = (state = init,action)=> {
    
    switch (action.type) {
    
        case 'add':
            return {
    
                count:state.count+1
            }
        default:
            return state
}}

export default reducer

store:

import reducer from "./reducer";
import {
    createStore} from "redux";

const store = createStore(reducer)
export default store

provider：

function App() {
    
  return (
    <Provider store={
    store}>
        <div className="App">
            <Index/>
            <Hom/>
        </div>
    </Provider>
  );
}

接收方：

import React,{
    Component} from "react";
import {
    connect} from "react-redux";

class Hom extends Component {
    
    render() {
    
        return (
            <div>
                {
    this.props.count}
            </div>
        )
    }
}

const map = (state)=> {
    
    console.log(state)
    return state
}
//接收到更新的state
export default connect(map)(Hom)

效果：