React-redux與redux

Redux中文文檔https://www.redux.org.cn/ React-redux中文文檔https://www.redux.org.cn/docs/react-redux/ Redux 是 JavaScript 狀態(tài)容器，提供可預測化的狀態(tài)管理删壮，如果通俗地一點來講，那么Redux可以看做是一個數(shù)據(jù)倉庫炎咖。 Redux與React-redux不是同一個庫，Redux可以用在客戶端、服務器乘盼、原生應用升熊，而React-redux是React官方提供的只作用于React的綁定庫。

Redux

Redux三大原則

單一數(shù)據(jù)源：整個應用的state被存儲在一棵object tree中绸栅，并且這個object tree只存在于一個store中级野，即使數(shù)據(jù)很多也沒關系，可以根據(jù)需要自定義的拆分數(shù)據(jù)阴幌。
State是只讀的：唯一改變state的方法就是觸發(fā)action
使用純函數(shù)來執(zhí)行修改：為了改變state勺阐，action描述事務“發(fā)生了什么”卷中，而真正的數(shù)據(jù)操作交給reducer

基礎

`Action`

Action是把數(shù)據(jù)從應用傳到store的有效載荷矛双，它是store數(shù)據(jù)的唯一來源，一般來說會通過store.dispatch()將action傳到store蟆豫，簡潔的概括就是action描述了事務"發(fā)生了什么"议忽，而真正更新state的是Reducer

`Reducer`

Reducer指定了應用狀態(tài)的變化如何響應actions并發(fā)送到store的，記住actions只是描述了事務"發(fā)生了什么"十减，并沒有描述應用是如何更新state栈幸，此外Reducer是一個純函數(shù)，接收舊的state并返回新的state帮辟，簡潔地概括就是根據(jù)actions更新state

`Store`

Store是將Action與Reducer聯(lián)系到一起的對象速址，Store有以下職責：
1、維持應用的state
2由驹、提供getState()方法獲取state
3芍锚、提供dispatch(action)方法更新state
4、通過subscribe(listener)注冊監(jiān)聽器
5蔓榄、通過subscribe(listener)返回的函數(shù)注銷監(jiān)聽器

示例

reducer.js

//定義狀態(tài)
const initState = {
    count: 100
}

const reducer = (state = initState, action) => {
    switch (action.type) {
        case 'increment':
            return Object.assign({},state,{
                count:state.count + 1
            })
        case 'decrement':
            return Object.assign({},state,{
                count:state.count - 1
            })
        default:
            return state
    }
}

export default reducer

定義了三個事件并炮，增加count、減少count和返回state

action.js

   return {
       type:'increment'
   }
}

export const handleDecrement=()=>{
   return {
       type:'decrement'
   }
}

定義了兩種事務

store.js

import {createStore} from "redux";
import reducer from "./reducer";
const store = createStore(reducer)
export default store

action甥郑、reducer和store都已定義,在react中使用

import React,{Component} from 'react'
import {
    handleIncrement,
    handleDecrement
} from '../redux/action'    //解構action定義的兩種事務

import store from '../redux/store'

export default class Redux1Comp extends Component {
    handleAdd=()=>{
        const action = handleIncrement()//發(fā)布
        store.dispatch(action)//更新
    }
    handleReduce=()=>{
        const action = handleDecrement()
        store.dispatch(action)
    }

    componentDidMount() {
        store.subscribe(()=>{
            this.setState({})
        })
    }

    render() {
        const {count} = store.getState()
        //store.getState()獲取數(shù)據(jù)
        return (
            <>
                <h1>redux</h1>
                <h2>count:{count}</h2>
                <button onClick={this.handleAdd}>+1</button>
                <button onClick={this.handleReduce}>-1</button>
            </>
        )
    }
}

以上是一個使用redux簡單的小例子實現(xiàn)逃魄，react-redux與redux一脈相承，只不過react-redux的使用更為簡單

React-redux

依然使用上面的這個例子的action.js澜搅、reducer.js和store.js

import React, {Component} from 'react';

//+16增幅組件
import {connect} from 'react-redux';

import {
    handleIncrement,
    handleDecrement,
    handleAsyncUpdataState
} from "../redux2/action2";

class ComA extends Component {
    handleAdd=()=>{
        console.log(this.props)
        const {add} = this.props
        add()
    }
    handleReduce=()=>{
        console.log(this.props)
        const {reduce} = this.props
        reduce()
    }
    handleAddAsync=()=>{
        console.log(this.props)
        const {addAsync} = this.props
        addAsync()
    }
    render() {
        return (
            <div className={'comA'}>
                <button onClick={this.handleAdd}>+1</button>
                <button onClick={this.handleReduce}>-1</button>
                <button onClick={this.handleAddAsync}>async +1</button>
            </div>
        );
    }
}
const mapDispatchToProps = (dispatch)=>{
    return {
        add(){
            const action = handleIncrement()
            console.log(action)
            dispatch(action)
        },
        reduce(){
            const action = handleDecrement()
            dispatch(action)
        },
        addAsync(){
            const action = handleAsyncUpdataState()
            console.log(action)
            dispatch(action)
        }
    }
}
//connect   第一個參數(shù)：允許我們將store中的數(shù)據(jù) 作為props綁定到組件
//          第二個參數(shù)：將action作為props綁定到我們自己的函數(shù)中
export default connect(null,mapDispatchToProps)(ComA);

在組件中獲取狀態(tài)

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

class ComB extends Component {
    render() {
        const {count} = this.props
        return (
            <div className={'comB'}>
                <h2>count:{count}</h2>
            </div>
        );
    }
}
//connect   第一個參數(shù)：允許我們將store中的數(shù)據(jù) 作為props綁定到組件
//          第二個參數(shù)：將action作為props綁定到我們自己的函數(shù)中
const mapStateToProps=(state)=>{
    return state
}
export default connect(mapStateToProps)(ComB);

與redux比較伍俘，React-redux更為簡潔，只要在mapStateToProps中綁定的state或者action就直接可以在組件的props中獲取到勉躺，這樣state與action在mapStateToProps統(tǒng)一管理养篓，使用起來很方便。更重要的是赂蕴，React-redux自己會監(jiān)聽state的變化進行更新柳弄，而redux需要手動的在生命周期componentDidMount進行訂閱事件來更新state。