Reactredux - 三大核心概念 - action - reducer - store - 异步编程 - react-redux - 调试工具 - 纯函数 - 高阶函数

Posted 2021-06-29 YK菌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Reactredux - 三大核心概念 - action - reducer - store - 异步编程 - react-redux - 调试工具 - 纯函数 - 高阶函数相关的知识，希望对你有一定的参考价值。

文章目录

1. redux理解
2. redux的三个核心概念
3. API
4. 使用redux编写应用
5. redux异步编程
6. react-redux
7. 使用上redux调试工具
- 7.1 安装chrome浏览器插件
- 7.2 下载工具依赖包
8. 纯函数和高阶函数
- 8.1 纯函数
- 8.2 高阶函数
9. 最终版
10. 项目运行打包

1. redux理解

1.1. 相关文档

中文文档: http://www.redux.org.cn/

Github: https://github.com/reactjs/redux

先把它装上

npm i redux

在这里插入图片描述

1.2. redux是什么

之前学过vuex，这两个差不多，都是状态管理用的

【Vue】Vuex管理状态入门到实战 - 计数器demo - todoList项目 - 组件间共享数据 - State - Mutation - Action - Getter

【Vue】vuex - 状态自管理应用 - state - view - actions

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

1.3. 什么情况下需要使用redux

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

1.4. redux工作流程

在这里插入图片描述

2. redux的三个核心概念

2.1. action

动作的对象
包含 2 个属性
- type：标识属性, 值为字符串, 唯一, 必要属性
- data：数据属性, 值类型任意, 可选属性
例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

2.2. reducer

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

2.3. store

将state、action、reducer联系在一起的对象
如何得到此对象?
1. import {createStore} from 'redux'
2. import reducer from './reducers'
3. const store = createStore(reducer)
此对象的功能?
1. getState(): 得到state
2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

3. API

3.1. `createStore()`

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

3.2. store对象

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

3.3. `applyMiddleware()`

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

3.4. `combineReducers()`

作用：合并多个reducer函数

4. 使用redux编写应用

4.1 效果

在这里插入图片描述

4.2 实现

redux/store.js

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

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

redux/count_reducer.js

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

import {INCREMENT,DECREMENT} from './constant'

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
  // console.log(preState);
  //从action对象中获取：type、data
  const {type,data} = action
  //根据type决定如何加工数据
  switch (type) {
    case INCREMENT: //如果是加
      return preState + data
    case DECREMENT: //若果是减
      return preState - data
    default:
      return preState
  }
}

redux/count_action.js

该文件专门为Count组件生成action对象

import {INCREMENT,DECREMENT} from './constant'

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

redux/constant.js

该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

Count/index.jsx

import React, { Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {createIncrementAction,createDecrementAction} from '../../redux/count_action'

export default class Count extends Component {

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

  //加法
  increment = ()=>{
    const {value} = this.selectNumber
    store.dispatch(createIncrementAction(value*1))
  }
  //减法
  decrement = ()=>{
    const {value} = this.selectNumber
    store.dispatch(createDecrementAction(value*1))
  }
  //奇数再加
  incrementIfOdd = ()=>{
    const {value} = this.selectNumber
    const count = store.getState()
    if(count % 2 !== 0){
      store.dispatch(createIncrementAction(value*1))
    }
  }
  //异步加
  incrementAsync = ()=>{
    const {value} = this.selectNumber
    setTimeout(()=>{
      store.dispatch(createIncrementAction(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>
    )
  }
}

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'))

// 监测redux中状态的改变，如redux的状态发生了改变，那么重新渲染App组件
store.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})

4.3 总结

store.js：
1). 引入redux中的createStore函数，创建一个store
2). createStore调用时要传入一个为其服务的reducer
3). 记得暴露store对象
count_reducer.js：
1. reducer的本质是一个函数，接收：preState,action，返回加工后的状态
2. reducer有两个作用：初始化状态，加工状态
3. reducer被第一次调用时，是store自动触发的，
  传递的preState是undefined,
  传递的action是:{type:'@@REDUX/INIT_a.2.b.4}
在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

完整版新增文件：

count_action.js 专门用于创建action对象
constant.js 放置容易写错的type值

5. redux异步编程

5.1理解

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

5.2. 使用异步中间件

npm install redux-thunk

在这里插入图片描述

count_action.js

该模块专门为Count组件生成action对象

异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步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对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))

5.3 总结

明确：延迟的动作不想交给组件自身，想交给action
何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
具体编码：
1. npm install redux-thunk，并配置在store中
2. 创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
3. 异步任务有结果后，分发一个同步的action去真正操作数据。
备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。

6. react-redux

6.1. 理解

一个React插件库
专门用来简化React应用中使用redux

6.2. react-redux将所有组件分成两大类

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

模型图
在这里插入图片描述

6.3. 相关API

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

6.4 基本使用

安装

npm install react-redux

在这里插入图片描述

components/Count/index.jsx

UI组件

import React, { Component } from 'react'

export default class Count extends Component {
  //加法
  increment = ()=>{
    const {value} = this.selectNumber
    this.props.jia(value*1)
  }
  //减法
  decrement = ()=>{
    const {value} = this.selectNumber
    this.props.jian(value*1)
  }

  //奇数再加
  incrementIfOdd = ()=>{
    const {value} = this.selectNumber
    if(this.props.count % 2 !== 0){
      this.props.jia(value*1)
    }
  }
  //异步加
  incrementAsync = ()=>{
    const {value} = this.selectNumber
    this.props.jiaAsync(value*1,500)
  }

  render() {
    //console.log('UI组件接收到的props是',this.props);
    return (
      <div>
        <h1>当前求和为：{this.props.count}</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>
    )
  }
}

containers/Count/index.jsx

容器组件

//引入Count的UI组件
import CountUI from '../../components/Count'
//引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'

//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

/* 
  1.mapStateToProps函数返回的是一个对象；
  2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
  3.mapStateToProps用于传递状态
*/
function mapStateToProps(state){
  return {count:state}
}

/* 
  1.mapDispatchToProps函数返回的是一个对象；
  2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
  3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch){
  return {
    jia:number => dispatch(createIncrementAction(number)),
    jian:number => dispatch(createDecrementAction(number)),
    jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
  }
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

App.jsx

给容器组件传递store

import React, { Component } from 'react'
import Count from './containers/Count'
import store from './redux/store'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 给容器组件传递store */}
        <Count store={store} />
      </div>
    )
  }
}

总结

明确两个概念：
1. UI组件:不能使用任何 redux 的api，只负责页面的呈现、交互等。
2. 容器组件：负责和 redux 通信，将结果交给UI组件。
如何创建一个容器组件————靠 react-redux 的 connect 函数
connect(mapStateToProps,mapDispatchToProps)(UI组件)
- mapStateToProps: 映射状态，返回值是一个对象
- mapDispatchToProps: 映射操作状态的方法，返回值是一个对象
备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
备注2：mapDispatchToProps，也可以是一个对象【优化1】

6.5 优化

优化1 简写`mapDispatchToProps`

//使用connect()()创建并暴露一个Count的容器组件
export default connect(
  state => ({count:state}),

  //mapDispatchToProps的一般写法
  /* dispatch => ({
    jia:number => dispatch(createIncrementAction(number)),
    jian:number => dispatch(createDecrementAction(number)),
    jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
  }) */

  //mapDispatchToProps的简写
  {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jiaAsync:createIncrementAsyncAction,
  }
)(CountUI)

优化2 Provider

容器组件可以检测redux中的状态改变，并渲染页面，所以不需要在index.js中检测了
不要在App.jsx中给子组件传递store了

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import {Provider} from 'react-redux'

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

优化3 整合UI组件和容器组件

每个组件两个文件夹太麻烦了，直接整合在一起就好了~

containers/Count/index.jsx

import React, { Component } from 'react'
//引入action
import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction
} from '../../redux/count_action'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

//定义UI组件
class Count extends Component {

  state = {carName:'奔驰c63'}

  //加法
  increment = ()=>{
    const {value} = this.selectNumber
    this.props.jia(value*1)
  }
  //减法
  decrement = ()=>{
    const {value} = this.selectNumber
    this.props.jian(value*1)
  }
  //奇数再加
  incrementIfOdd = ()=>{
    const {以上是关于Reactredux - 三大核心概念 - action - reducer - store - 异步编程 - react-redux - 调试工具 - 纯函数 - 高阶函数的主要内容，如果未能解决你的问题，请参考以下文章 
 Docker系列文-----Docker三大核心概念以及实战（nginx与MySQL）
 ：Pytorch简介和其三大核心概念
 Kubernetes三大核心概念
 Kubernetes三大核心概念
 详解 vue 组件三大核心概念
 Docker核心概念

Reactredux - 三大核心概念 - action - reducer - store - 异步编程 - react-redux - 调试工具 - 纯函数 - 高阶函数

文章目录

1. redux理解

1.1. 相关文档

1.2. redux是什么

1.3. 什么情况下需要使用redux

1.4. redux工作流程

2. redux的三个核心概念

2.1. action

2.2. reducer

2.3. store

3. API

3.1. createStore()

3.2. store对象

3.3. applyMiddleware()

3.4. combineReducers()

4. 使用redux编写应用

4.1 效果

4.2 实现

redux/store.js

redux/count_reducer.js

redux/count_action.js

redux/constant.js

Count/index.jsx

index.js

4.3 总结

5. redux异步编程

5.1理解

5.2. 使用异步中间件

count_action.js

store.js

5.3 总结

6. react-redux

6.1. 理解

6.2. react-redux将所有组件分成两大类

6.3. 相关API

6.4 基本使用

安装

components/Count/index.jsx

containers/Count/index.jsx

App.jsx

总结

6.5 优化

优化1 简写mapDispatchToProps

优化2 Provider

index.js

优化3 整合UI组件和容器组件

containers/Count/index.jsx

3.1. `createStore()`

3.3. `applyMiddleware()`

3.4. `combineReducers()`

优化1 简写`mapDispatchToProps`