redux的使用 - 技术栈

redux是跟vue中的vuex和pinia类似的一个状态管理库，可以跟任一一个框架进行结合，包括vue、react以及angular。不过在与redux结合这一方面，显然react要做的更好。接下来我会详细介绍在不结合react时，redux是怎么使用的，我们用到的环境是nodeJS环境，因此我们需要用到CommonJS规范。

redux最核心的三个部分包括store 、action 、reducer 。store 就是redux中最核心的类似于CPU的东西，一切的行为都有store发起。action ，见名知意就是行为的意思，在redux中action就是一个普通的对象({type: 'xxx', payload: 'xxx'})，type这个属性表示此次action的含义，payload就是此次行为所携带的数据。reducer 是数据中心(一个普通的函数)，action携带的数据统一在reducer这里进行处理，所有的数据在reducer这里有一个统一的名称：**state，然后reducer是一个 纯函数（简而言之就是确定的输入有确定的输出）。**下面就开始介绍redux的使用。

首先我们需要安装相关的依赖，这里用的包管理器是pnpm，在安装依赖之前，我们先使用pnpm init这个命令生成package.json文件，然后就可以安装依赖(pnpm add redux)了。安装完依赖之后，我们就可以正式开始redux的使用了。

首先我们需要引入store，我们用到的是redux这个库中createStore这个函数，目前这个函数已经废弃了，因为有更好的工具可以代替，但是核心还是不变的，所以理解了这一流程之后，用其他的api也是一样的。

javascript 复制代码

const { createStore } = require('redux')

const store = createStore()

module.exports = store

perl 复制代码

createStore这个函数接收一个reducer，以下代码就是reducer，只是一个普通的函数，这个函数接收两个参数，state表示数据，payload表示action所携带的普通对象，在reducer中我们根据不同的action中携带的type不一样，来对state进行处理，由于reducer是一个纯函数，因此我们不能直接修改state中的数据(比如 state.name = 'xxx')

javascript 复制代码

// 初始化数据
const initialState = {
  name: 'coder',
  age: 20,
  count: 100
}

/**
 * 
 * @param {*} state store中目前保存的state
 * @param {*} payload 本次需要更新的action(dispatch传入的action)
 * @returns 作为store之后存储的state
 */
const reducer = (state = initialState, payload) => {
  const { type } = payload
  switch(type) {
    case CHANGE_COUNT: {
      return { ...state, count: state.count + payload.count}
    }
    default:
      return state
  }
}
module.exports = reducer

写了store和reducer之后，就是行为的发起了，这也是我们使用redux的守门员，想要获取reudx中的数据，我们首先需要store派发一个action，然后才能进行下面一系列的操作。

javascript 复制代码

const countAction = {
  type: 'change_count',
  count: 110
}

以上就是一个改变数字的action，但是由于我们可能会发起多个action，因此我们可以将其改造成一个函数，然后在发起的时候去调用。

javascript 复制代码

const addCountAction = (num) => ({
  type: CHANGE_COUNT,
  count: num
})

module.exports = {
  addCountAction
}

以上准备工作都做完之后，我们就可以正式来使用redux了。我们需要使用时，只需要引入store，并发起action就可以了。

javascript 复制代码

const store = require('./store')
const { addCountAction } = require('./actionCreators')
store.dispatch(addCountAction(10))

写完以上代码，我们就可以使用store的getState()这个方法查看更新后的保存在reducer的数据了，但是由于我们并不能每一次调用dispatch都去调用一次getState()这个方法，因此，我们可以对行为的派发进行订阅，这样每一次行为的派发，都会监听到。

javascript 复制代码

store.subscribe(() => {
  console.log(store.getState())
})

以上就是redux的基本使用。每一个概念(store、action、reducer)都可以单独写一个文件，比如所有action可以写在actionCreators.js这个文件里。