做网站的时候会用 鸟瞰图吗,如何欣赏网站,广昌网站建设制作,轻松做网站React redux 一、理解1、学习文档2、redux 是什么吗3、什么情况下需要使用 redux4、redux 工作流程5、react-redux 模型图 二、redux 的三个核心概念1、action2、reducer3、store 三、redux 的核心 API1、getState()2、dispatch() 四、使用 redux 编写应用1、求和案例\_redux 精… React redux 一、理解1、学习文档2、redux 是什么吗3、什么情况下需要使用 redux4、redux 工作流程5、react-redux 模型图 二、redux 的三个核心概念1、action2、reducer3、store 三、redux 的核心 API1、getState()2、dispatch() 四、使用 redux 编写应用1、求和案例\_redux 精简版1.1 去除 Count 组件自身的状态1.2 src 下建立1.3 store.js1.4 count_reducer.js1.5 在 index.js 中检测 store 中状态的改变一旦发生改变重新渲染 2、求和案例\_redux 完整版3、求和案例\_redux 异步 action 版4、求和案例\_react-redux 基本使用4.1 明确两个概念4.2 如何创建一个容器组件—— react-redux 的 connect 函数4.3 备注 1容器组件中的 store 是靠 props 传递的而不是容器组件中直接引入 store4.4 备注 2mapDispatchToProps 也可以是一个对象 5、求和案例\_react-redux 优化6、多组件共享数据\_redux 管理7、纯函数8、Redux 开发者工具 redux-devtool 五、项目打包运行 一、理解
1、学习文档
1、英文文档https://redux.js.org/ 2、中文文档http://www.redux.org.cn/
2、redux 是什么吗
1、redux 是一个专门用于做状态管理的 JS 库不是 react 插件库 2、它可以用在 react、angular、vue 等项目中但基本与 react 配合使用 3、作用集中式管理 react 应用中多个组件共享的状态
3、什么情况下需要使用 redux
1、某个组件的状态需要让其他组件可以随时拿到共享 2、一个组件需要改变另一个组件的状态通信 3、总体原则能不用就不用如果不用比较吃力才考虑使用
4、redux 工作流程
将公共的数据给到 redux
5、react-redux 模型图
1、所有的 UI 组件都应该包裹一个容器组件他们是父子关系。 2、容器组件时真正和 redux 打交道的里面可以随意的使用 redux 的 api 3、UI 组件中不能使用任何 redux 的 api 4、容器组件会传给 UI 组件 1redux 中所保存的状态 2用于操作状态的方法 5、备注容器给 UI 传递状态这里的状态是 redux 中的状态、操作状态的方法均通过 props 传递
二、redux 的三个核心概念
1、action
1、动作的对象 2、包含 2 个属性 type 标识属性值为字符串唯一必要属性 data 数据属性值类型任意可选属性 3、例子
{type:ADD_STUDENT,data:{name: Tom, age:18}}action 如果是 Object 的一般对象就是 同步 action 如果值是 function 的对象就是 异步 action
2、reducer
1、用于初始化状态、加工状态 2、加工时根据旧的 state 和 action产生新的 state 的纯函数
3、store
1、将 state、action、reducer 联系在一起的对象 2、如何得到此对象 1import {createStore} from “redux” 2import reducer from “./reducer” 3const store createStore(reducer) 3、此对象的功能 1 getState()得到 state 2dispatch(action)分发 action触发 reducer 调用产生新的 state 3subscribe(listener)注册监听当产生了新的 state 时自动调用
三、redux 的核心 API
1、getState()
获取状态
2、dispatch()
分发
四、使用 redux 编写应用
求和应用 展示求和进行 加、减、结果为奇数加、异步加 运算
1、求和案例_redux 精简版
1.1 去除 Count 组件自身的状态
1.2 src 下建立
-redux -store.js -count_reducer.js
1.3 store.js
1.3.1 引入 redux 中的 createStore 函数创建一个 store 1.3.2 createStore 调用时要传入一个为其服务的 reducer 1.3.3 记得暴露 store 对象
1.4 count_reducer.js
1.4.1 reducer 的本质是一个函数接收preStateaction 返回加工后的状态 1.4.2 reducer 有两个作用初始化状态加工状态 1.4.3 reducer 被第一次调用时是 store 自动触发的 传递的 preState 是 undefined 传递的 action 是 {type: ‘redux/INITn.j.9.n.r.k’}
1.5 在 index.js 中检测 store 中状态的改变一旦发生改变重新渲染
备注redux 只负责管理状态至于状态的改变驱动着页面的展示要靠我们自己写
2、求和案例_redux 完整版
新增文件 1、count_action.js 专门用于 创建 action 对象 2、constant.js 放置由于编码疏忽写错 action 中的 type
3、求和案例_redux 异步 action 版
1、明确延迟的动作不想交给组件自身想交给 action 2、何时需要异步 action想要状态进行操作但是具体的数据靠异步任务返回非必须 3、具体编码 3.1 yarn add redux-thunk 并配置在 store 中 3.2 创建 action 的函数不再返回一般对象而是一个函数该函数中写异步任务 3.3 异步任务有结果后分发一个同步的 action 去真正操作数据 4、备注异步 action 不是必须要写的完全可以自己等待异步任务的结果返回了再去分发同步 action
4、求和案例_react-redux 基本使用
4.1 明确两个概念
1、UI 组件不能使用任何 redux 的 api只负责页面的呈现、交互等 2、容器组件负责和 redux 同学呢将结果交给 UI 组件
4.2 如何创建一个容器组件—— react-redux 的 connect 函数
connect(mapStateToProps,mapDisapatchToProps)(UI 组件) mapStateToProps 映射状态返回值是一个对象 mapDisapatchToProps映射操作状态的方法返回值是一个对象
容器组件的写法
// 容器组件 react-redux// 引入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 用于传递状态*/
// mapStateToProps 函数的返回值作为状态传递给了 UI 组件
// 返回的对象中的 key 就作为传递给 UI 组件 props 的key value就作为传递给 UI 组件 props 的value -- 状态
const mapStateToProps (state) {return {count: state,}
}// mapDisapatchToProps 函数返回的对象中的 key 就作为传递给 UI 组件 props 的key value就作为传递给 UI 组件 props 的value -- 操作状态的方法
const mapDisapatchToProps (dispatch) {return {jia: (data) {// 通知 redux 执行加法dispatch(createIncrementAction(data))},jian: (data) {// 通知 redux 执行加法dispatch(createDecrementAction(data))},jiaAsync: (data) {// 通知 redux 执行加法dispatch(createIncrementAsyncAction(data, 500))},}
}// 使用 connect()() 创建并暴露一个 Count 的容器组件
export default connect(mapStateToProps, mapDisapatchToProps)(CountUI)UI 组件的写法
import React, { Component } from react
export default class CountUI extends Component {// 加法increment () {const { value } this.selectNothis.props.jia(value * 1)}// 减法decrement () {const { value } this.selectNothis.props.jian(value * 1)}// 当前求和为奇数再加incrementIfOdd () {let { count } this.propsif (count % 2 ! 0) {this.increment()}}//异步加incrementAsync () {const { value } this.selectNothis.props.jiaAsync(value * 1)}render() {console.log(props---, this.props)return (divh1当前求和为{this.props.count}/h1selectref{(c) {this.selectNo c}}option value11/optionoption value22/optionoption value33/option/selectnbsp;nbsp;button onClick{this.increment}加/button nbsp;nbsp;button onClick{this.decrement}减/buttonnbsp;nbsp;button onClick{this.incrementIfOdd}当前求和为奇数再加/buttonnbsp;nbsp;button onClick{this.incrementAsync}异步加/button/div)}
}4.3 备注 1容器组件中的 store 是靠 props 传递的而不是容器组件中直接引入 store
4.4 备注 2mapDispatchToProps 也可以是一个对象
react-redux 会将 action 进行分发不再需要自己调用 dispatch
容器组件(自带监测功能)的优化写法
// 容器组件 react-redux// 引入Count 的 UI 组件
import CountUI from ../../components/Count
// 引入 action
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction,
} from ../../redux/count_action// 引入 connect 用于连接 UI 组件与 redux
import { connect } from react-redux// 使用 connect()() 创建并暴露一个 Count 的容器组件
export default connect((state) ({ count: state }),/*// mapDispatchToProps 的一般写法dispatch{return {jia: (data) {// 通知 redux 执行加法dispatch(createIncrementAction(data))},jian: (data) {// 通知 redux 执行加法dispatch(createDecrementAction(data))},jiaAsync: (data) {// 通知 redux 执行加法dispatch(createIncrementAsyncAction(data, 500))},}}*/// mapDispatchToProps 的简写{jia: createIncrementAction, // react-redux 会将action进行分发不再需要自己调用 dispatchjian: createDecrementAction,jiaAsync: createIncrementAsyncAction,},
)(CountUI)容器组件里面的 store 从哪里得到的——
5、求和案例_react-redux 优化
1、容器组件和 UI 组件混成一个文件 2、无需自己给容器组件传递 store给 包裹一个 Provider store{store} 即可 3、使用了 react-redux 后也不用自己监测 redux 中状态的改变了容器组件可以自动完成这个工作 4、mapDispatchToProps 也可以简单的写成一个对象 5、一个组件要和 redux “打交道”要警告过哪几步 1定义 UI 组件 — 不暴露 2引入 connect 生成一个容器组件并暴露写法如下
connect(state(key:value),// 映射状态{key: xxxxAction}//映射操作状态的方法
)(UI 组件)3在 UI 组件中通过 this.props.xxx 读取和操作状态
6、多组件共享数据_redux 管理
1、定义一个 Person 组件和 Count 组件通过 redux 共享数据 2、为 Person 组件编写reducer、action 配置 constant 常量
3、重点Person 的 reducer 和 Count 的 reducer 要使用 combineReducers 进行合并合并后的总状态时一个对象 4、交给 store 的时总 reducer最后注意在组件中取出状态的时候记得“取到位”
export default connect((state) ({sum: state.sum,personList: state.personList,}),{jia: createIncrementAction,},
)(Count)Count 组件的 action
/*** 该文件专门为 Count 组件生成 action 对象*/
import { INCREMENT, DECREMENT } from ../constant
export const createIncrementAction (data) {return {type: INCREMENT,data,}
}
// 同步 action返回一般对象。同步 action 的值为 Object 类型的一般对象
export const createDecrementAction (data) ({type: DECREMENT,data,
})
// 异步action 返回 函数。 异步action 就是指 action 的值为函数。异步action 中一般都会调用同步 action
export const createIncrementAsyncAction (data, time) {return (dispatch) {console.log(dispatch, dispatch)setTimeout(() {dispatch(createIncrementAction(data))}, time)}
}
// 数组和数字都不能够开启 异步任务所以不会定义这些类型为异步 action7、纯函数
1、一类特别的函数只要是同样的输入实参必定得到同样的输出返回 2、必须遵守以下一些约束 1不得改参数数据 2不会产生任何副作用例如网络请求输入和输出设备 3不能调用 Date.now() 或者 Math.random() 等不纯的方法 3、redux 的 reducer 函数必须是一个纯函数不能写 unshift 等方法添加数据如果 preState 被改写 reducer 就不纯了页面也不会更新
8、Redux 开发者工具 redux-devtool
1、安装开发者工具 2、安装依赖配合插件使用 npm i redux-devtools-extension 3、store 中引入
import { composeWithDevTools } from redux-devtools-extension
export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)),
)store.js 完整代码
/*** 该文件专门用于暴露一个store 对象整个应用只有一个 store 对象*/
// 引入createStore专门用于创建 redux 中最为核心的是store 对象
import { applyMiddleware, createStore, combineReducers } from redux// 引入 redux-thunk 用于支持异步action
import thunk from redux-thunk// 引入为 Count 组件服务的reducer
import countReducer from ./reducers/count
import personReducer from ./reducers/person
import { composeWithDevTools } from redux-devtools-extension// 汇总所有的 reducer 变成一个总的 reducer
const allReducer combineReducers({sum: countReducer,personList: personReducer,
})export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)),
)五、项目打包运行
npm run build
使用 serve 插件可以在本地开启一个本地服务器使用命令 serve 就可以启动当前的文件夹 npm i serve -g
项目资源文件
