React 之redux 学习加求和案例

1、redux 是什么

• Redux 是一个专门用于做 状态管理 的JS 库(不是react 库)
• 它可以用在react、angular 、vue 等项目中，但基本与react 配合使用
• 作用：集中式管理react 应用中多个组件共享的状态

2、Redux三大概念

• action: 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说通过 store.dispatch() 将 action 传到 store。
  • 包含两个属性：1.type 2.data
• reducer: 根据 action 执行改变 state 的动作
• store: 管理state、action和reducer的状态机

3、store的职责:

1. 维持应用的 state；
2. 提供 getState() 方法获取 state；
3. 提供 dispatch(action) 方法更新state；
4. 通过 subscribe(listener) 注册监听器;
5. 通过 subscribe(listener) 返回的函数注销监听器。

4、什么情况下需要使用redux

• 某个组件的状态需要让其他组件可以随时拿到（共享）
• 一个组件需要改变另一个组件的状态（通信）

求和案例:

(1) store.js

• 引入redux中的createStore函数，创建一个store对象
• createStore调用时要引入为count组件服务的reducer
• 暴露store对象

// 引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入为count组件服务的reducer
import countReducer  from './count_reducer'
export default createStore(countReducer)

(2) count_reducer.js

• reducer 的本质是一个函数，接收：preState,action,返回加工后的state
• reducer 有两个作用：初始化状态，加工状态
• reducer 被第一次调用时，是store自动触发的，传递的preState 是 undefined

const initState = 0   //初始化状态
export default function countReducer(preState = initState,action){
    if(preState === undefined) preState = 0
    //console.log(preState,action);
    //从action对象中获取：type,data
    const {type,data} = action
    switch(type){
        case 'increment':   //如果是加
        //console.log('@');
            return preState + data
        case 'decrement':   //如果是减
            return preState - data
        default:
            return preState
    }
}

(3) index.js

• 在index中检测store中状态的改变，一旦发生改变重新渲染
• redux 只负责管理状态，至于状态的改变驱动着首页的展示，需要手动增添。

import React from "react";
import store from "../../redux/store"

export default class Count extends React.Component{
    state={carName:'大众'}
     
    componentDidMount(){
         //检测redux中状态的变化，只要变化，就调用render
         store.subscribe(()=>{   //订阅subscribe
           this.setState({})
         })
     }
    //加法
    increment=()=>{
        const {value} = this.selectNumber
        // 通过redux加value
        store.dispatch({type:'increment',data:value *1})
    }
    //减法
    decrement=()=>{
        const {value} = this.selectNumber
        store.dispatch({type:'decrement',data:value *1})
    }
    //奇数再加
    incrementIfodd=()=>{
        const {value} = this.selectNumber
        const count = store.getState()
        if(count % 2!==0){
            store.dispatch({type:'increment',data:value *1})
        }
    }
    //异步加
    incrementAsync=()=>{
        const {value} = this.selectNumber
        setTimeout(()=>{
            store.dispatch({type:'decrement',data:value *1})
        },500)
    }
    render(){
        return(
            <div>
                <h1>当前求和为：{store.getState()}</h1>
                <select ref={c=>this.selectNumber = c}>
                    <option value="1">1</option>    
                    <option value="2">2</option>    
                    <option value="3">3</option>    
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfodd}>当前求和为奇数</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>&nbsp;
            </div>
        )
    }
}

效果展示：