React学习笔记4（Redux、React-Redux）
零 l 说明
本文参考教程：[尚硅谷2021版React技术全家桶]
本文上接：
[React学习笔记1（React概念）]
[React学习笔记2（React脚手架、组件通信与网络请求库）]
[React学习笔记3（React路由、Ant Design）]
一 l Redux 基础
文档：
- 英文文档: https://redux.js.org/
- 中文文档: http://www.redux.org.cn/
- Github: https://github.com/reactjs/redux
Redux 是什么：
- redux是一个专门用于做 状态管理 的JS库(不是react插件库)。
- 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
- 作用: 集中式管理react应用中多个组件 共享 的状态。
- 其实就类似于后端的Redis
为什么用 Redux：
- 某个组件的状态，需要让其他组件可以随时拿到（共享）。
- 一个组件需要改变另一个组件的状态（通信）。
- 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。
（一）Redux 工作流程
白话版流程：
【初始化是store自动调用。此时previousState是undefined；action的types是“@@redux/INTIxxx”，data为“
空”】
- 从 React Components[React组件] 开始，发送“action[动作对象]”给 Action Creators[动作创建器]
(1) action动作对象是包含type属性和data属性的Object对象，如{type:'increment', data: 1}；或是函数（Redux 高级会细说）- Action Creators[动作创建器] 使用
dispatch(action)函数，把action[动作对象]发送给 Store[仓库]- Store[仓库] 将
(previousState, action)[之前的状态, 动作对象] 发送给 Reducers[归纳器] ，Reducers[归纳器] 计算完后返回newState[新状态]回 Store[仓库]- React Components[React组件] 从 Store[仓库] 获取处理完的新数据
action（一个需要的组件一个）
- 动作的对象
- 包含2个属性
(1) type：标识属性, 值为字符串, 唯一, 必要属性
(2) data：数据属性, 值类型任意, 可选属性 - 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }
reducer（一个需要的组件一个）
- 用于初始化状态、加工状态。
- 加工时，根据旧的state和action， 产生新的state的纯函数。
store（唯一）
- 将state、action、reducer联系在一起的对象
- 如何得到此对象?
(1) import {createStore} from ‘redux’
(2) import reducer from ‘./reducers’
(3) const store = createStore(reducer)
（二）Redux 核心API
1、store对象
- 作用: redux库最核心的管理对象
- 它内部维护着:
(1) state
(2) reducer - 核心方法:
(1) getState(): 获取store中state状态值
(2) dispatch(action): 分发action, 触发reducer调用, 产生新的state
(3) subscribe(listener): 注册监听, 当store存储了新的state时, 自动调用 - 具体编码:
(1) store.getState()
(2) store.dispatch({type:‘INCREMENT’, number})
(3) store.subscribe(render)
2、createStore(reducer)
作用：创建包含指定reducer的store对象
3、applyMiddleware()
作用：应用上基于redux的中间件(插件库)
4、combineReducers()
作用：合并多个reducer函数
（三）demo 1.0
效果图：
1、文件说明及注意事项
- projectName/src/redux/store.js：【唯一的store定义】
(1) 引入redux中的createStore函数，创建一个store
(2) createStore调用时要传入一个为其服务的reducer
(3) 记得暴露store对象 - projectName/src/redux/count_reducer.js：【定义count组件的reducer】
(1) reducer的本质是一个函数，接收：preState,action，返回加工后的状态
(2) reducer有两个作用：初始化状态，加工状态
(3) reducer被第一次调用时，是store自动触发的。传递的preState是undefined，传递的action是:{type:’@@redux/INIT随机字符串} - projectName/src/redux/count_action.js：【专门用于创建count组件的action对象】
- projectName/src/redux/constant.js：【放置容易写错的type值】
- projectName/src/index.js：【在index.js中监测store中状态的改变】
一旦发生改变重新渲染
备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。
2、主要代码
projectName/src/redux/constant.js：【放置容易写错的type值】
export const INCREMENT = 'increment' export const DECREMENT = 'decrement'
projectName/src/redux/store.js：【唯一的store定义】
// 引入createStore，专门用于创建redux中最为核心的store对象 import {createStore} from 'redux' // 引入为Count组件服务的reducer import countReducer from './count_reducer' // 暴露store export default createStore(countReducer)
projectName/src/redux/count_reducer.js：【定义count组件的reducer】
import {INCREMENT,DECREMENT} from './constant' const initState = 0 // 初始化状态 export default function countReducer(preState=initState,action){ // 从action对象中获取：type、data const {type,data} = action // 根据type决定如何加工数据 switch (type) { case INCREMENT: // 如果是加 return preState + data case DECREMENT: // 若果是减 return preState - data default: return preState } }
projectName/src/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})
projectName/src/components/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 { state = {vars: '其他不需要共享的变量'} // 加法 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> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div> ) } }
projectName/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')) })
projectName/src/App.jsx
import React, { Component } from 'react' import Count from './components/Count' export default class App extends Component { render() { return ( <div> <Count/> </div> ) } }
二 l Redux 高级
（一）【不常用】异步(延迟)发送action
action[动作对象] 有两种格式：
- Object 对象（同步action）：Action Creators返回一个对象，如
{type:'xxx', data: x}- function 函数（异步action）：Action Creators返回一个函数，函数中自定义操作
1、为什么需要异步(延迟)发送action
- 延迟的动作不想交给组件自身，想交给action
- 想要对状态进行操作，但是具体的数据靠action异步任务返回
- 组件自身延迟不够通用
2、实现
上面的demo 1.0中，在组件Count中实现了异步(延迟)发送action，这不够通用，下面流程说明在Action Creators中实现异步(延迟)发送action
- 安装异步处理插件（命令行中）：
yarn add redux-thunk - 在store中引入redux-thunk，用于支持异步action
projectName/src/redux/store.js：【唯一的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))
- 修改Action Creators的代码：
projectName/src/redux/count_action.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) } }
（二）纯函数和高阶函数（redux不起作用bug的原因）
1、纯函数
- 一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)
- 必须遵守以下一些约束：【函数中不能有随机因素，且形参不能改】
(1) 不得改写参数数据
(2) 不会产生任何副作用，例如不能有网络请求，输入和输出设备等不靠谱的行为
(3) 不能调用Date.now()、Math.random()、unshift()、等不纯的方法（输出不确定） - redux的reducer函数必须是一个纯函数
2、高阶函数
- 理解: 一类特别的函数
(1) 情况1: 参数是函数
(2) 情况2: 返回是函数 - 常见的高阶函数:
(1) 定时器设置函数
(2) 数组的forEach()/map()/filter()/reduce()/find()/bind()
(3) promise
(4) react-redux中的connect函数 - 作用: 能实现更加动态, 更加可扩展的功能
三 l React-Redux（React 官方发布的 Redux 整合包）
（一）介绍
1、模型图
- UI组件
(1) 不能使用任何redux的api，只负责 UI 的呈现
(2) 通过props接收数据(一般数据和函数)
(3) 不使用任何 Redux 的 API
(4) 一般保存在components文件夹下
(5) UI组件可以放在容器组件的相同文件下，不写这么多文件，容易乱- 容器组件
(1) 负责和redux通信，将结果交给UI组件，不负责UI的呈现
(2) 使用 Redux 的 API
(3) 一般保存在containers文件夹下
优点：
- 不用在src/index.js监听state的变化进行实时渲染，提高效率（每次改变都会渲染，就算不渲染到真实DOM，diff算法也是开销）
- 可以自动将store传给每个需要的容器
2、相关API
- Provider：让所有组件都可以得到state数据
<Provider store={store}>
<App />
</Provider>
- connect：用于包装 UI 组件生成容器组件 （创建容器组件的方法）
import { connect } from 'react-redux'
connect(
mapStateToprops,
mapDispatchToProps
)(Counter)
- mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性
const mapStateToprops = function (state) {
return {
value: state
}
}
- mapDispatchToProps：将分发action的函数转换为UI组件的标签属性 （可以是函数也可以是对象）
3、一般代码流程
- 定义好UI组件—不暴露
- 引入connect生成一个容器组件，并暴露，写法如下：
connect(
state => ({key1:value}), // 映射状态
{key2:xxxxxAction} // 映射操作状态的方法
)(UI组件)
- 在UI组件中通过this.props.key1读取和操作状态
（二）demo 2.0（React-Redux 的基本使用）
不变的文件夹（相对demo 1.0）：
- projectName/src/redux/store.js：【唯一的store定义】
- projectName/src/redux/count_reducer.js：【定义count组件的reducer】
- projectName/src/redux/count_action.js：【专门用于创建count组件的action对象】
- projectName/src/redux/constant.js：【放置容易写错的type值】
- projectName/src/App.jsx
删除的文件夹：
- projectName/src/components/Count/index.jsx【Count组件】
代码：
projectName/src/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.increment(value*1) } // 减法 decrement = ()=>{ const {value} = this.selectNumber this.props.decrement(value*1) } // 奇数再加 incrementIfOdd = ()=>{ const {value} = this.selectNumber if(this.props.count % 2 !== 0){ this.props.increment(value*1) } } // 异步加 incrementAsync = ()=>{ const {value} = this.selectNumber this.props.incrementAsync(value*1,500) } render() { 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> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div> ) } } /** * 使用connect()()创建并暴露一个Count的容器组件 * * 第一个参数 * 1.mapStateToProps函数返回的是一个对象； * 2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value * 3.mapStateToProps用于传递状态 * * 第二个参数 * 1.mapDispatchToProps函数返回的是一个对象； * 2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value * 3.mapDispatchToProps用于传递操作状态的方法 */ 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的简写（React-Redux对Redux中API的优化） { increment:createIncrementAction, decrement:createDecrementAction, incrementAsync:createIncrementAsyncAction, } )(Count)
projectName/src/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自动的将redux中的store给到需要的组件 */ <Provider store={store}> <App/> </Provider>, document.getElementById('root') )
（三）demo 3.0 完整版项目（React-Redux、组件通信、Redux 开发者工具）
1、组件通信注意事项
- 定义一个Pserson组件，和Count组件通过redux共享数据。
- 为Person组件编写：reducer、action，配置constant常量。
- 重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，合并后的总状态是一个对象！！！
- 交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位(取到变量)”。
- reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer
2、React-Redux 开发者工具的使用
- 安装浏览器插件（请自行安装）：Redux DevTools
- 安装（命令行中）：
npm install redux-devtools-extension --save - store中进行配置
import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
3、【重要】完整代码
效果图：
文件结构：
（1）基本代码
projectName/public/index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>redux</title> </head> <body> <div id="root"></div> </body> </html>
projectName/src/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包裹App，目的是让App所有的后代容器组件都能接收到store */ <Provider store={store}> <App/> </Provider>, document.getElementById('root') )
projectName/src/App.jsx
import React, { Component } from 'react' import Count from './containers/Count' // 引入的Count的容器组件 import Person from './containers/Person' // 引入的Person的容器组件 export default class App extends Component { render() { return ( <div> <Count/> <hr/> <Person/> </div> ) } }
（2）Redux - store代码：
projectName/src/redux/store.js
/** * 该文件专门用于暴露一个store对象，整个应用只有一个store对象 */ // 引入createStore，专门用于创建redux中最为核心的store对象 import {createStore,applyMiddleware} from 'redux' // 引入汇总之后的reducer import reducer from './reducers' // 引入redux-thunk，用于支持异步action import thunk from 'redux-thunk' // 引入redux-devtools-extension import {composeWithDevTools} from 'redux-devtools-extension' // 暴露store export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
projectName/src/redux/constant.js
/** * 该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错 */ export const INCREMENT = 'increment' export const DECREMENT = 'decrement' export const ADD_PERSON = 'add_person'
（3）Redux - actions代码：
projectName/src/redux/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) } }
projectName/src/redux/actions/person.js
import {ADD_PERSON} from '../constant' // 创建增加一个人的action动作对象 export const addPerson = personObj => ({type:ADD_PERSON,data:personObj})
（4）Redux - reducers代码：
projectName/src/redux/reducers/count.js
/** * 1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数 * 2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action) */ import {INCREMENT,DECREMENT} from '../constant' const initState = 0 // 初始化状态 export default function countReducer(preState=initState,action){ // 从action对象中获取：type、data const {type,data} = action // 根据type决定如何加工数据 switch (type) { case INCREMENT: // 如果是加 return preState + data case DECREMENT: // 若果是减 return preState - data default: return preState } }
projectName/src/redux/reducers/person.js
import {ADD_PERSON} from '../constant' // 初始化人的列表 const initState = [{id:'001',name:'tom',age:18}] export default function personReducer(preState=initState,action){ const {type,data} = action switch (type) { case ADD_PERSON: // 若是添加一个人 // preState.unshift(data) //此处不可以这样写，这样会导致preState被改写了，personReducer就不是纯函数了。 return [data,...preState] default: return preState } }
projectName/src/redux/reducers/index.js
/** * 该文件用于汇总所有的reducer为一个总的reducer */ // 引入combineReducers，用于汇总多个reducer import {combineReducers} from 'redux' // 引入为Count组件服务的reducer import count from './count' // 引入为Person组件服务的reducer import persons from './person' // 汇总所有的reducer变为一个总的reducer（这里规定了store中的key） export default combineReducers({ count, persons })
容器代码：
projectName/src/contains/Count/index.jsx
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 { state = {carName:'奔驰c63'} // 加法 increment = ()=>{ const {value} = this.selectNumber this.props.increment(value*1) } // 减法 decrement = ()=>{ const {value} = this.selectNumber this.props.decrement(value*1) } // 奇数再加 incrementIfOdd = ()=>{ const {value} = this.selectNumber if(this.props.count % 2 !== 0){ this.props.increment(value*1) } } // 异步加 incrementAsync = ()=>{ const {value} = this.selectNumber this.props.incrementAsync(value*1,500) } render() { return ( <div> <h2>我是Count组件,下方组件总人数为:{this.props.persons}</h2> <h4>当前求和为：{this.props.count}</h4> <select ref={c => this.selectNumber = c}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button> <button onClick={this.incrementAsync}>异步加</button> </div> ) } } // 使用connect()()创建并暴露一个Count的容器组件 export default connect( state => ({ count:state.count, personCount:state.persons.length }), {increment,decrement,incrementAsync} )(Count)
projectName/src/contains/Person/index.jsx
import React, { Component } from 'react' import {nanoid} from 'nanoid' import {connect} from 'react-redux' 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.props.addPerson(personObj) this.nameNode.value = '' this.ageNode.value = '' } render() { return ( <div> <h2>我是Person组件,上方组件求和为{this.props.count}</h2> <input ref={c=>this.nameNode = c} type="text" placeholder="输入名字"/> <input ref={c=>this.ageNode = c} type="text" placeholder="输入年龄"/> <button onClick={this.addPerson}>添加</button> <ul> { this.props.persons.map((p)=>{ return <li key={p.id}>{p.name}--{p.age}</li> }) } </ul> </div> ) } } export default connect( state => ({ persons:state.persons, count:state.count }), // 映射状态 {addPerson} // 映射操作状态的方法 )(Person)
扫一扫
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
