位置: IT常识 - 正文

Redux的基本使用过程详解(redux入门教程)

编辑:rootadmin
Redux的基本使用过程详解 文章目录Redux的使用过程Redux测试项目的搭建Redux的基本使用步骤Redux目录的结构划分React的三大原则Redux的使用过程Redux测试项目的搭建

推荐整理分享Redux的基本使用过程详解(redux入门教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:redux-immutable,redux的使用流程,redux的使用流程,redux-form,redux-immutable,redux快速入门,redux入门教程,redux的使用流程,内容如对您有帮助,希望把文章链接给更多的朋友!

1.创建一个新的项目文件夹:learn-redux

# 执行初始化操作 npm init -y或yarn init -y

# 安装redux:npm install redux --save或yarn add redux

2.创建src目录,在src目录下创建一个store文件夹, 并且在该文件夹下创建index.js文件

3.可以修改package.json用于执行index.js, 也可以不配置, 直接使用node命令运行

"scripts": { "start": "node src/index.js"}Redux的基本使用步骤

1.创建一个对象,作为我们要保存的状态state:

// 由于测试项目在node环境下, 因此使用require方式导入const { createStore } = require("redux")// 创建的要存储的state: initialStateconst initialState = { name: "chenyq", age: 18}

2.创建Store来存储这个state

由于创建的state是不能直接放到创建的store中的, 需要通过reducer将数据添加到store中, 因此创建store时必须创建reducer;

reducer函数的返回值, 会作为store之后存储的state

// 定义reducer, 将要存储的state作为返回值返回function reducer() { return initialState}// 创建的store, 内部会自动回调reducer, 拿到initialStateconst store = createStore(reducer)// 导出storemodule.exports = store

我们可以在其他文件中通过 store.getState 来获取当前的state;

// 导入创建的storeconst store = require("./store")// 获取store中的stateconsole.log(store.getState())

3.通过action来修改state

错误演示: 直接修改store

store.getState().name = "abc"

修改store中的数据不能直接修改, 必须要通过dispatch来派发action;

通常action中都会有type属性,也可以携带其他的数据;

// 定义一个actionconst nameAction = { type: "change_name", name: "abc" }// 派发actionstore.dispatch(nameAction)

当然上面代码中, 也可以写为一行

// 派发actionstore.dispatch({ type: "change_name", name: "abc" })

4.修改reducer中的处理代码

reducer接收两个参数:

参数一: store中当前保存的state

参数二: 本次需要更新的action

只要调用dispatch就会重新执行reducer函数

这里一定要记住,reducer是一个纯函数,不可以直接修改state, 后面我会讲到直接修改state带来的问题;

// 第一次state是undefined, 因此给一个默认值将初始化数据添加到store中function reducer(state = initialState, action) { // 有数据更新时, 返回一个新的state if (action.type === "change_name") { return { ...state, name: action.name } } // 没有数据更新时, 返回之前的state return state}Redux的基本使用过程详解(redux入门教程)

5.可以在派发action之前,监听store的变化:

通过store.subscribe()函数可以监听store中的数据变化

store.subscribe()函数的参数接收一个函数, 该函数在store数据发生更新自动回调

const store = require("./store")// 例如: 监听数据的变化, 当store变化, 就获取最新的statestore.subscribe(() => { console.log(store.getState())})store.dispatch({ type: "change_name", name: "abc" })store.dispatch({ type: "change_name", name: "aaa" })

6.封装函数动态生成action

例如上面代码中, 我们修改名称多次, 只有传入的action的name属性值不相同, 那么我们可以封装一个函数, 动态的生成action, 这也是开发中一贯的做法

// 创建修改name的actionconst changeNameAction = (name) => ({ type: "change_name", name})// 创建修改age的actionconst changeAgeAction = (num) => ({ type: "change_age", num})// 在派发action时, 我们就可以调用函数即可获取actionstore.dispatch(changeNameAction("aaa"))store.dispatch(changeNameAction("bbb"))store.dispatch(changeNameAction("ccc"))store.dispatch(changeAgeAction(10))store.dispatch(changeAgeAction(20))store.dispatch(changeAgeAction(30))store.dispatch(changeAgeAction(40))Redux目录的结构划分

如果我们将所有的逻辑代码写到一起,那么当redux变得复杂时代码就难以维护。

例如上面代码中, 我们封装的动态创建action的函数, 这种动态生成action的函数在项目中可能会有很多个, 而且在其他多个文件中也可能会使用, 所以我们最好是有一个单独的文件夹存放这些动态获取action的函数

接下来,我会对代码进行拆分,将store、reducer、action、constants拆分成一个个文件。

创建store/index.js文件: index文件中, 我们只需要创建store即可

const { createStore } = require("redux")// 引入reducerconst reducer = require("./reducer")// 创建的store, 内部会自动回调reducer, 拿到initialStateconst store = createStore(reducer)// 导出storemodule.exports = store

创建store/reducer.js文件: 在真实项目中, reducer这个函数我们会越写越复杂, 造成我们index.js文件越来越大, 所以我们将reducer也抽离到一个单独的文件中

const { CHANGE_NAME, CHANGE_AGE } = require("./constants")// 创建的要存储的初始化stateconst initialState = { name: "chenyq", age: 18}// 定义reducer, 将要存储的state作为返回值返回// 第一次state是undefined, 因此给一个默认值将初始化数据添加到store中function reducer(state = initialState, action) { switch(action.type) { case CHANGE_NAME: return { ...state, name: action.name } case CHANGE_AGE: return {...state, age: state.age + action.num} } // 没有数据更新时, 返回之前的state return state}module.exports = reducer

创建store/constants.js文件: 将type的类型定义为常量(防止写错的情况), 这些常量最好也防止一个单独的文件中

// store/constants.jsconst CHANGE_NAME = "change_name"const CHANGE_AGE = "change_age"module.exports = { CHANGE_NAME, CHANGE_AGE}

创建store/actionCreators.js文件: 将封装的动态创建action的函数放在该文件中, 在需要使用的地方导入即可

const { CHANGE_NAME, CHANGE_AGE } = require("./store/constants")// 创建修改name的actionconst changeNameAction = (name) => ({ type: CHANGE_NAME, name})// 创建修改age的actionconst changeAgeAction = (num) => ({ type: CHANGE_AGE, num})module.exports = { changeNameAction, changeAgeAction}

最终形成如下目录结构, 这也是官方推荐的目录结构, 一个store中包含这四个文件夹

注意:node中对ES6模块化的支持, 建议使用CommonJS规范

React的三大原则

单一数据源

整个应用程序的state被存储在一颗object tree中,并且这个object tree只存储在一个 store 中:

Redux并没有强制让我们不能创建多个Store,但是那样做并不利于数据的维护;

单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改;

State是只读的

唯一修改State的方法一定是触发action,不要试图在其他地方通过任何的方式来修改State:

这样就确保了View或网络请求都不能直接修改state,它们只能通过action来描述自己想要如何修改state;

这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行,所以不需要担心race condition(竟态)的问题;

使用纯函数来执行修改

通过reducer将旧state和actions联系在一起,并且返回一个新的State:

随着应用程序的复杂度增加,我们可以将reducer拆分成多个小的reducers,分别操作不同state tree的一部分;

但是所有的reducer都应该是纯函数,不能产生任何的副作用;

本文链接地址:https://www.jiuchutong.com/zhishi/300655.html 转载请保留说明!

上一篇:走进小程序【六】微信小程序架构之【视图层】万字详解(进入微信小程序)

下一篇:10 OpenCV图像识别之人脸追踪(opencv图像识别特定形状)

  • 航天金税盘使用说明
  • 增值税的账务处理办法
  • 已发货没开票分录
  • 增值税一般纳税人税率
  • 合并成本是
  • 电子发票怎么开具
  • 本月发生费用下月收到发票
  • 业务招待费可以进成本吗
  • 预付账款和暂估入账的区别
  • 返利销售增值税
  • 公司茶水间有什么
  • 餐饮通用机打发票可以报销吗
  • 向银行申请签发银行汇票的会计分录
  • 企业所得税逾期了一定要去税局前台申报吗
  • 美金报关出口能不能收跨境人民币
  • 什么叫未完税
  • 分支机构享受了税收优惠,是由总机构备案还是分支机构备案?
  • 财务保证金怎么做分录
  • 长期驻扎外地的员工
  • 免税店汇率是什么意思
  • 如何填写企业所得税
  • 五险一金的会计分录怎么写
  • 无形资产的增值税怎么算
  • 预付账款流程
  • 为什么windows10关机后自动开机
  • 所有者权益的确认主要依赖于什么
  • 哪种审计证据可以查出来
  • 未认证用户是什么意思
  • 编写一个php程序,展示双引号和单引号的区别
  • 煤矿安全费用提取规定
  • 傅里叶变换的过程
  • 小规模纳税人年收入超过500万必须转为一般纳税人吗
  • 期末汇兑损益计算公式
  • 用python写
  • 基建拨款会计分录
  • 纳税调整项目明细表利息支出怎么填
  • 差旅费过路费会计分录
  • 福利部门的福利有哪些
  • 公司负担个人所得税如何做账
  • 国库集中支付发送签收失败
  • 公司项目支付的钱叫什么
  • 浅谈php设计模式的理解
  • 用友T3财务报表没有数据
  • sql查询表中指定数据
  • mysql查询在什么之间
  • 金税四期的政策
  • 库存商品总分类账范本
  • 交车险代收的车可以退吗
  • 应付职工薪酬包含哪些科目
  • 未入账负债怎么算
  • 股东入股怎么做分录
  • 如何做好应收应付会计
  • 垃圾清运费的收费标准乱要钱怎么办
  • 工程材料票抵扣比例
  • 怎么解释税收
  • 车辆购置税计入税金及附加吗
  • 私营企业固定资产法律制度
  • 什么是汇总记账凭证账务处理程序?有哪些特点?
  • win7怎么清除记录
  • winxp系统怎么设置默认账户登入
  • 如何查看电脑端口号
  • windows设置
  • linux安装.gz
  • win7 win8.1
  • 红帽子在工地上是什么级别
  • linux临时修改编码
  • grep正则表达式运用举例
  • win8.1怎么重新装系统
  • require注解
  • net命令用法
  • perl获取文件名
  • android native opengl
  • ligerUI---ListBox(列表框可移动的实例)
  • 提高css文件可维性的方法
  • unity摄像机在哪里
  • 数据库多表连接的几种方式
  • javascript 基础篇2 数据类型,语句,函数
  • javascript模块化规范
  • androidstudio offline
  • 纳税人虚假纳税申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设