redux管理全局状态

1、定义一个仓库

import { createSlice } from '@reduxjs/toolkit'

export const mainSlice = createSlice({
  name: 'main',
  initialState: {
    name: 'liMing',
    age: 18,
  },
  reducers: {
    updateKey(state, action) {
      const { key, value } = action.payload
      // @ts-ignore
      state[key] = value
    },
  },
})

2、修改仓库状态

dispatch(mainSlice.actions.updateKey({ key: 'age', value: 20 }))

• 在这个 mainSlice 定义中，updateState 是一个 reducer，它接收两个参数：当前的状态 state 和一个 action 对象 action。这个 action 对象是一个 PayloadAction，其 payload 是一个对象，包含两个属性：key 和 val。
• 可以看到，仓库里面的updateKey接收两个参数，而我们在调用的时候，只传递了一个对象作为参数，实参与形参不符，这是为什么呢？

3、当我们调用方法updateKey时，redux内部发生了什么？

• 当你调用 mainSlice.actions.updateState({ key: 'dialogExchange', val: false }) 时，你实际上是在调用一个 action creator，并传递了一个对象作为参数。这个对象被用作 action 的 payload。

• 这个 action creator 会生成一个包含 type（由 createSlice 自动生成，通常是 slice 名称加上 reducer 名称的驼峰式组合）和 payload（你传递的对象）的 action 对象。

• 当你将这个 action 对象通过 dispatch 函数发送到 Redux store 时，Redux store 会查找是否有任何 reducer 函数能够处理这个 type 的 action。由于 RTK 已经为你自动生成了与 mainSlice/updateState 相对应的 reducer 函数（或更准确地说是 reducer case），因此 Redux store 会调用这个 reducer 函数，并将当前的状态和 action 作为参数传递给它。

• reducer 函数会根据 action 的内容来更新状态，并返回一个新的状态对象。Redux store 会用这个新状态来更新其内部的状态树，并通知所有订阅了该状态变化的监听器

4、示意图