七、redux基础知识

一、认识redux

1. 什么是redux？

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

2. 什么情况下使用redux？

• 共享：某个组件的状态，其他组件也可以随时操作
• 通信：一个组件需要改变另一个组件的状态
• 但是，由于redux的使用较为复杂，在能避免使用的情况下尽量避免使用

二、redux的工作流程图

三、redux中的核心概念

1. action

• 动作的对象，其中包含两个属性，分别是：

type：标识属性, 值为字符串, 唯一, 必要属性
data：数据属性, 值类型任意, 可选属性

2. reducer

• 用于初始化状态、加工状态
• reducer的本质就是一个函数，reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
• reducer有两个作用：初始化状态，加工状态
• reducer被第一次调用时，是store自动触发的，传递的preState是undefined，传递的action是:{type:’@@REDUX/INIT_a.2.b.4}

3. store

• 作用：将state、action、reducer联系在一起的对象
• 如何得到此对象?

import {createStore} from 'redux'
import reducer from './reducers'
//创建包含指定reducer的store对象
const store = createStore(reducer)

• 核心方法：

1.getState()：
store.getState()用来获取redux中管理的数据
2.dispatch(action)：
store.dispatch({type:‘INCREMENT’, number})
3.subscribe(listener)：
store.subscribe(render)监测store中状态的改变，一旦发生改变重新渲染

四、案例——简单的加减法运算器

1. 效果图：将组件Count中的count值放在redux中进行管理
   
2. 安装

npm install redux

3. 组件Count：

import React, { Component } from 'react'
import store from '../../redux/store'
import {incrementAction, decrementAction} from '../../redux/count_action'

export default class Count extends Component {
    increment = () => {
        const {value} = this.selectNode
        store.dispatch(incrementAction(value*1))
    }
    decrement = () => {
        const {value} = this.selectNode
        store.dispatch(decrementAction(value*1))
    }
    oddIncrement = () => {
        const data = store.getState()
        const {value} = this.selectNode
        if(data % 2 !== 0) {
            store.dispatch(incrementAction(value*1))
        }
    }
    asyncIncrement = () => {
        const {value} = this.selectNode
        setTimeout(() => {
            store.dispatch(incrementAction(value*1))
        }, 500)
    }
    render() {
        
        return (
            <div>
                <h3>当前求和为：{store.getState()}</h3>
                <select ref={c => this.selectNode=c}>
                    <option value="1">1</option>&nbsp;&nbsp;
                    <option value="2">2</option>&nbsp;&nbsp;
                    <option value="3">3</option>&nbsp;&nbsp;
                </select>&nbsp;&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;&nbsp;
                <button onClick={this.oddIncrement}>当前求和为奇数时加</button>&nbsp;&nbsp;
                <button onClick={this.asyncIncrement}>异步加</button>
            </div>
        )
    }
}

redux/count_action.js

export const incrementAction = data => ({type:'increment', data})
export const decrementAction = data => ({type:'decrement', data})

redux/store.js

import {createStore} from 'redux'
import countReducer from './count_reducer'

export default createStore(countReducer)

redux/count_reducer.js

const initState = 0
export default function countReducer (preState=initState, action) {
 const {type, data} = action
 switch(type) {
     case 'increment': 
        return preState + data
     case 'decrement': 
        return preState - data
     default:
        return preState
 }
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import store from './redux/store'

ReactDOM.render(<App/>,document.getElementById('root'))
//数据发生变化时，渲染页面
store.subscribe(() => {
    ReactDOM.render(<App/>,document.getElementById('root'))
})