我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

Redux是一个体小精悍的库,但它相关的内容和 API 都是精挑细选的,足以衍生出丰富的工具集和可扩展的生态系统。这个是官方写的文字提示,很多人都是从react得到的redux的消息的,所以,reduxreact究竟是什么关系呢?

苏南大叔:redux的基本概念,redux是什么?redux入门第一个例子 - redux-basic
redux的基本概念,redux是什么?redux入门第一个例子(图5-1)

大家好,这里是苏南大叔的网络自留地,这里记录苏南大叔和计算机代码的故事。本文主要介绍redux中的一些基本概念。测试环境:node@16.14.2redux@4.2.0

基本概念

下面的文字,都是基于苏南大叔自己的理解,很可能并不是正确答案。reduxreact绑定在一起的,redux也可以用于其它框架,或者单独使用。redux主要做的事情,就是对数据进行管理。

如果对react比较了解的话,那就是管理react中的state数据的。但是,reactredux两者都可以单独使用。组合一下的话,只是可能会对数据管理更加容易一些。

redux的官方地址:

苏南大叔:redux的基本概念,redux是什么?redux入门第一个例子 - redux-www
redux的基本概念,redux是什么?redux入门第一个例子(图5-2)

安装的命令是:

npm i redux -S

第一个例子

下面的代码是redux官方提供的入门例子,事实上没有参杂任何其它的框架内容,是个单独使用的例子。苏南大叔做了小小的修改,主要的修改点就是:对修改数据的函数,传递并接收了参数。代码如下:

import { createStore } from 'redux'
function counterReducer(state = { value: 100 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + action.num }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}
let store = createStore(counterReducer)
store.subscribe(() => console.log(store.getState()))
store.dispatch({ type: 'counter/incremented',num:3 })
store.dispatch({ type: 'counter/incremented',num:5 })
store.dispatch({ type: 'counter/decremented' })

在上述的nodejs代码中,使用了import代码。所以,关于代码运行方式,可以参考:

苏南大叔:redux的基本概念,redux是什么?redux入门第一个例子 - redux-code
redux的基本概念,redux是什么?redux入门第一个例子(图5-3)

综合考虑的话,苏南大叔这里推荐使用.mjs方式,来执行上述代码。命令行类似如下:

node test.mjs

运行结果如下:

苏南大叔:redux的基本概念,redux是什么?redux入门第一个例子 - dispatch-by-type
redux的基本概念,redux是什么?redux入门第一个例子(图5-4)

代码解说

需要特别说明的是:
上述代码虽然是redux入门第一个例子,但是这个例子中的核心函数createStore()已经被官方自己放弃了。运行的时候,就可以看到在相关函数上面有横线,意思就是废弃的意思。所以,大家就是来理解一下redux的基本概念就好了,毕竟这个代码是最简单最好运行的。

苏南大叔:redux的基本概念,redux是什么?redux入门第一个例子 - 流程图
redux的基本概念,redux是什么?redux入门第一个例子(图5-5)

在上述代码中,主要的思想就是:对state里面的数据进行管理。

  • reducer是个很飘渺虚拟的概念。个人理解是个对数据进行处理的所有函数的集合之地,换成别的函数名字也可以。
  • reducer函数其第一个参数state就是数据的初始值,会被持久化。
  • 引入createStore(),传入的参数就是上面的reducer函数,得到一个store
  • store.getState()是获得当前的state数据。
  • store.subscribe()就是个订阅,当state数据发生变化的时候,会自动执行这个订阅里面的函数。例子里面,就是打印state数据。
  • store.dispatch()是用于执行对数据的改变的。根据规则,其参数对象必须指定一个type,也就是要真实执行的函数名称。如果有其它的附加数据,写在上述参数对象里面。例如上面的num
  • store.dispatch(data)data传递到reducer里面就是第二个参数action。根据action.type进行分化处理,同时处理附加的其它数据,例如上面的num

相关文章

综述

本文就是简述一个redux到底是什么的文章,虽然说的也不是全面,就是个入门第一个例子罢了。

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   redux