redux的基本概念，redux是什么？redux入门第一个例子

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

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

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

基本概念

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

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

redux的官方地址：

• http://cn.redux.js.org/

安装的命令是：

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代码。所以，关于代码运行方式，可以参考：

• https://newsn.net/say/node-run-es6.html

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

node test.mjs

运行结果如下：

代码解说

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

在上述代码中，主要的思想就是：对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。

相关文章

• http://cn.redux.js.org/
• https://redux.js.org/

综述

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

• https://newsn.net/tag/redux/

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