redux

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

什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
2. 一个组件需要改变另一个组件的状态（通信）。
3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

redux工作流程

redux的三个核心概念

action

1. 动作的对象

2. 包含2个属性

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

3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

reducer

1. 用于初始化状态、加工状态。
2. 加工时，根据旧的state和action， 产生新的state的纯函数。

store

1. 将state、action、reducer联系在一起的对象

2. 如何得到此对象?

   1. import {createStore} from ‘redux’

   2. import reducer from ‘./reducers’

   3. const store = createStore(reducer)

3. 此对象的功能?

   1. getState(): 得到state
   2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
   3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

redux的核心API

createstore()（以弃用可以用 legacy_createStore 代替）

作用：创建包含指定 reducer 的store对象

// count_reducer.js
/* 
    1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
    2.reducer函数会接收到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/

// 初始化值
const initState = 0
export default function counterReducer(preState = initState, { type, data }) {
    console.log(preState,type, data);
    // 根据type决定如何加工数据
    switch (type) {
        case 'increment': // 如果是加
            return preState + data*1
        case 'decrement': // 如果是减
            return preState - data*1
        default:
            return preState
    }
}

// sotre.js
/* 
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象 createStore已弃用
import { legacy_createStore as createStore } from 'redux'

// 引入为Count组件服务的reducer
import countReducer from './count_reducer'

export default createStore(countReducer)

store对象

1. 作用: redux库最核心的管理对象
2. 它内部维护着:
   1. state
   2. reducer
3. 核心方法:
   1. getState()
   2. dispatch(action)
   3. subscribe(listener)
4. 具体编码:
   1. store.getState()
   2. store.dispatch({type:’INCREMENT’, number})
   3. store.subscribe(render)

// sotre.js
/* 
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象 createStore已弃用
import { legacy_createStore as createStore } from 'redux'

// 引入为Count组件服务的reducer
import countReducer from './count_reducer'

export default createStore(countReducer)

// constant.js
/* 
    该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

// count_reducer.js
/* 
    1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
    2.reducer函数会接收到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import { INCREMENT, DECREMENT } from './constant'

// 初始化值
const initState = 0
export default function counterReducer(preState = initState, { type, data }) {
    console.log(preState, type, data);
    // 根据type决定如何加工数据
    switch (type) {
        case INCREMENT: // 如果是加
            return preState + data * 1
        case DECREMENT: // 如果是减
            return preState - data * 1
        default:
            return preState
    }
}

// count_actions.js
/* 
    该文件专门为Count组件生成action对象
*/
import { INCREMENT, DECREMENT } from './constant'


export const createIncrementAction = data => ({ type: INCREMENT, data })

export const createDecrementAction = data => ({ type: DECREMENT, data })

// Count组件
import React, { Component } from 'react'
// 引入store，用于获取reduce中保存的状态
import store from '../../redux/store'
import {createIncrementAction,createDecrementAction} from '../../redux/count_actions'

export default class Count extends Component {
    // componentDidMount() {
    //     // 检测redux中状态的变化，只要变化，就调用render
    //     store.subscribe(() => {
    //         this.setState({})
    //     })
    // }

    // 加法
    increment = () => {
        const { value } = this.selectNumber
        // 通知redux加value
        store.dispatch(createIncrementAction(value))
    }

    // 减法
    decrement = () => {
        const { value } = this.selectNumber
        // 通知redux加value
        store.dispatch(createDecrementAction(value))
    }

    // 奇数再加
    incrementIfOdd = () => {
        const { value } = this.selectNumber

        if (store.getState() % 2 !== 0) {
            store.dispatch(createIncrementAction(value))
        }
    }

    // 异步加
    incrementAsync = () => {
        const { value } = this.selectNumber

        setTimeout(() => {
            store.dispatch(createIncrementAction(value))
        }, 1000)
    }

    render() {
        // const { count } = this.state
        return (
            <div>
                <h1>当前求和为：{store.getState()}</h1>
                <select ref={(c) => (this.selectNumber = c)} name="" id="">
                    <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>
            </div>
        )
    }
}

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(<App />)


// 检测redux中状态的变化，只要变化，就调用render
store.subscribe(() => {
    root.render(<App />)
})

applyMiddleware()

作用：应用上基于redux的中间件(插件库)

combineReducers()

作用：合并多个reducer函数

redux异步编程

理解：

1. redux默认是不能进行异步处理的,
2. 某些时候应用中需要在redux中执行异步任务(ajax, 定时器)

使用异步中间件

npm install –save redux-thunk

// count_actions.js
/* 
    该文件专门为Count组件生成action对象
*/
import { INCREMENT, DECREMENT } from './constant'

// 同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({ type: INCREMENT, data })

export const createDecrementAction = data => ({ type: DECREMENT, data })

// 所谓的异步action，就是指action的值为函数，异步action中一般都会调用同步action，异步action不是必须要用的
export const createIncrementAsyncAction = (data, time) => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(createIncrementAction(data))
        }, time)
    }
}

// store.js
/* 
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象 createStore已弃用
import { legacy_createStore as createStore, applyMiddleware } from 'redux'

// 引入为Count组件服务的reducer
import countReducer from './count_reducer'

// 引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'

export default createStore(countReducer, applyMiddleware(thunk))

react-redux

理解

1. 一个react插件库
2. 专门用来简化react应用中使用redux

react-Redux将所有组件分成两大类

1. UI组件
   1. 只负责 UI 的呈现，不带有任何业务逻辑
   2. 通过props接收数据(一般数据和函数)
   3. 不使用任何 Redux 的 API
   4. 一般保存在components文件夹下
2. 容器组件
   1. 负责管理数据和业务逻辑，不负责UI的呈现
   2. 使用 Redux 的 API
   3. 一般保存在containers文件夹下

相关API

1. Provider：让所有组件都可以得到state数据
2. connect：用于包装 UI 组件生成容器组件
3. mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性
4. mapDispatchToProps：将分发action的函数转换为UI组件的标签属性

react-redux数据共享

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from './redux/store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <Provider store={store}>
        <App />
    </Provider>
)

// App,jsx
import React, { Component } from 'react'
import Count from './containers/Count'
import Person from './containers/Person'
export default class App extends Component {
  render() {
    return (
      <div>
        <Count />
        <hr />
        <Person/>
      </div>
    )
  }
}

// constant.js
/* 
    该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

export const ADD_PERSON = 'add_person'

// actions/count.js
/* 
    该文件专门为Count组件生成action对象
*/
import { INCREMENT, DECREMENT } from '../constant'

// 同步action，就是指action的值为Object类型的一般对象
export const increment = data => ({ type: INCREMENT, data })

export const decrement = data => ({ type: DECREMENT, data })

// 所谓的异步action，就是指action的值为函数，异步action中一般都会调用同步action，异步action不是必须要用的
export const incrementAsync = (data, time) => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(increment(data))
        }, time)
    }
}

// actions/person.js
import { ADD_PERSON } from '../constant'

// 创建增加一个人的action动作东西
export const addPerson = personObj => ({ type: ADD_PERSON, data: personObj })

// reducer/count.js
/* 
    1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
    2.reducer函数会接收到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import { INCREMENT, DECREMENT } from '../constant'

// 初始化值
const initState = 0
export default function counterReducer(preState = initState, { type, data }) {
    // 根据type决定如何加工数据
    switch (type) {
        case INCREMENT: // 如果是加
            return preState + data * 1
        case DECREMENT: // 如果是减
            return preState - data * 1
        default:
            return preState
    }
}

// reducer/person.js
import { ADD_PERSON } from '../constant'

const initState = [{ id: '001', name: 'tom', age: 18 }]
export default function personReducer(preState = initState, { type, data }) {

    switch (type) {
        case ADD_PERSON:
            return [data, ...preState]

        default:
            return preState
    }
}

// reducer/index.js
/* 
    该文件用于汇总所有的reducer为一个总的reducer
*/
// 引入combineReducers，用于汇总多个reducer
import { combineReducers } from 'redux'
// 引入为Count组件服务的reducer
import count from './count'
// 引入为Person组件服务的reducer
import persons from './person'

// 合并reducer
export default combineReducers({
    count,
    persons
})

// store.js
/* 
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象 createStore已弃用
import { legacy_createStore as createStore, applyMiddleware } from 'redux'
// 引入汇总之后的所有reducer
import allReducer from './reducer'
// 引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
// 引入redux-devtools-extension
import { composeWithDevTools } from 'redux-devtools-extension'


// 暴露store 
export default createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)))

// containers/Count
import React, { Component } from 'react'
// 引入action
import { increment, decrement, incrementAsync } from '../../redux/actions/count'
// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'

// 定义UI组件
class Count extends Component {
    // 加法
    increment = () => {
        const { value } = this.selectNumber
        // 通知redux加value
        this.props.increment(value)
    }

    // 减法
    decrement = () => {
        const { value } = this.selectNumber
        // 通知redux加value
        this.props.decrement(value)
    }

    // 奇数再加
    incrementIfOdd = () => {
        const { value } = this.selectNumber
        if (this.props.count % 2 !== 0) {
            this.props.increment(value)
        }
    }

    // 异步加
    incrementAsync = () => {
        const { value } = this.selectNumber
        this.props.incrementAsync(value, 1000)
    }

    render() {
        // console.log('ui组件接收到的props', this.props)
        const { count,persons } = this.props
        return (
            <div>
                <h2>我是Count组件，下方组件人数为{persons.length}</h2>
                <h4>当前求和为：{count}</h4>
                <select ref={(c) => (this.selectNumber = c)} name="" id="">
                    <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>
            </div>
        )
    }
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(
    (state) => ({ count: state.count,persons:state.persons }),
    // mapDispatchToProps的一般写法
    /* (dispath) => ({
        jia: (value) => dispath(createIncrementAction(value)),
        jian: (value) => dispath(createDecrementAction(value)),
        jiaAsync: (value, time) => dispath(createIncrementAsyncAction(value, time)),
    }) */

    // mapDispatchToProps的简写 自动分发
    {
        increment,
        decrement,
        incrementAsync,
    }
)(Count)

// containers/Person
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { nanoid } from 'nanoid'
import { addPerson } from '../../redux/actions/person'

class Person extends Component {
    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value * 1
        const personObj = {
            id: nanoid(),
            name,
            age,
        }
        this.nameNode.value = ''
        this.ageNode.value = ''
        this.props.addPerson(personObj)
    }

    render() {
        const { persons, count } = this.props
        return (
            <div>
                <h2>我是Person组件，上方组件和为{count}</h2>
                <input ref={(c) => (this.nameNode = c)} type="text" placeholder="请输入名字" />
                <br />
                <input ref={(c) => (this.ageNode = c)} type="text" placeholder="请输入年龄" />
                <br />
                <button onClick={this.addPerson}>添加</button>
                <br />
                <ul>
                    {persons.map((v) => {
                        return (
                            <li key={v.id}>
                                名字{v.name}---年龄{v.age}
                            </li>
                        )
                    })}
                </ul>
            </div>
        )
    }
}

export default connect((state) => ({ 
    persons: state.persons, 
    count: state.count 
}), {
    addPerson,
})(Person)

使用上redux调试工具

安装chrome浏览器插件

下载工具依赖包

npm install --save-dev redux-devtools-extension

纯函数和高阶函数

纯函数

1. 一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)

2. 必须遵守以下一些约束

   1. 不得改写参数数据

   2. 不会产生任何副作用，例如网络请求，输入和输出设备

   3. 不能调用Date.now()或者Math.random()等不纯的方法

3. redux的reducer函数必须是一个纯函数

高阶函数

1. 理解: 一类特别的函数
   1. 情况1: 参数是函数
   2. 情况2: 返回是函数
2. 常见的高阶函数:
   1. 定时器设置函数
   2. 数组的forEach()/map()/filter()/reduce()/find()/bind()
   3. promise
   4. react-redux中的connect函数
3. 作用: 能实现更加动态, 更加可扩展的功能