ReduxToolkit的使用

首先进行安装toolkit 和 react-redux

npm install @reduxjs/toolkit react-redux

Redux Toolkit 示例

在src目录下新建stroe文件夹，store文件夹下新建index.js和modules（模块）文件夹

src >> stroe >> index.js / mudules

1. 创建 Redux Store（redux仓库）

• 在我们新建的store文件夹下的index.js里粘贴即可

import { configureStore } from '@reduxjs/toolkit'

// 使用configureStore创建一个redux仓库
// 并自动配置了 Redux DevTools 扩展 ，这样你就可以在开发时调试 store
export default configureStore({
  // 此时我们还没有写入  reducer  后面这里再写入，有一个就写一个，也可以写入多个，在reducer大括号里写入
  reducer: {},
})

2. 为 React 提供 Redux Store

• 新建完仓库之后，并没有与React产生关联，所以我们需要产生关联，这样React才能进行使用Toolkit

在index.js中进行关联

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
// 引入数据仓库，只有文件夹，默认会引入文件夹下的index.js
import store from './store'
// 结构出提供者组件，它有一个stroe属性，属性值就是我们要传递的值
import { Provider } from 'react-redux'

ReactDOM.render(
  {/* 包裹App组件，这样全局都能进行使用 */}
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

3. 创建 Redux State Slice(切片)

• 切片可以理解为模块

• 在modules文件夹下新建counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

// 创建react数据切片 利用createSlice()
export const counterSlice = createSlice({
  // 类似于vuex的命名空间，必须是唯一值
  // 与pinia的defineStore()的第一个参数一个意思，都是唯一值，做区分
  name: 'counter',
  // 定义变量
  initialState: {
    value: 0,
  },
  // 定义方法
  reducers: {
    // 方法接收2个参数，第一个参数是变量，第二个参数是载荷(也就是使用方法传入的参数)
    // +1  
    increment: (state) => {
      // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
      // 并不是真正的改变状态值，因为它使用了 Immer 库
      // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
      // 不可变的状态
      // 大致意思就是可以直接修改原先的值，它会产生新的不可变状态，放心大胆修改
      state.value += 1
    },
    // -1
    decrement: (state) => {
      state.value -= 1
    },
    // 这种是使用action的时候传参的
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})
// 每个 case reducer 函数会生成对应的 Action creators 需要进行导出，这样组件使用方法或者变量的时候，直接引入就可了
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

4. 将 Slice Reducers 添加到 Store 中

下一步，我们需要从计数切片中引入 reducer 函数，并将它添加到我们的 store 中。通过在 reducer 参数中定义一个字段，我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新

import { configureStore } from '@reduxjs/toolkit'
// 引入 reducer 函数
import counterSlice from './modules/counterSlice'

// 使用configureStore创建一个redux仓库
// 并自动配置了 Redux DevTools 扩展 ，这样你就可以在开发时调试 store
export default configureStore({
  reducer: {
    // 告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新
    counter: counterSlice,
  },
})

5. 在 React 组件中使用 Redux 状态和操作

现在我们可以使用 React-Redux 钩子让 React 组件与 Redux store 交互。我们可以使用 useSelector 从 store 中读取数据，使用 useDispatch dispatch actions。

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from '../store/modules/counterSlice'

export default function Person() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <h2>Person -- {count}</h2>
      <button
        // aria-label="Increment value"
        onClick={() => dispatch(increment())}
      >
        增加
      </button>
      <button
        // aria-label="Decrement value"
        onClick={() => dispatch(decrement())}
      >
        减少
      </button>
    </div>
  )
}

如何处理异步任务

counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

// 创建react数据切片 利用createSlice()
export const counterSlice = createSlice({
  // 类似于vuex的命名空间，必须是唯一值
  // 与pinia的defineStore()的第一个参数一个意思，都是唯一值，做区分
  name: 'counter',
  // 变量
  initialState: {
    value: 0,
  },
  // 方法
  reducers: {
    // 方法接收2个参数，第一个参数是变量，第二个参数是载荷(也就是使用方法传入的参数)
    increment: (state) => {
      // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
      // 并不是真正的改变状态值，因为它使用了 Immer 库
      // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
      // 不可变的状态
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
    // 获取数据的异步请求方法
    getD: (state, action) => {
      fetch('https://cnodejs.org/api/v1/topics')
        .then((response) => response.json())
        .then((res) => console.log(res))
    },
  },
})
// 每个 case reducer 函数会生成对应的 Action creators
export const { increment, decrement, incrementByAmount, getD } =
  counterSlice.actions

// 定义异步任务,参数写道外层函数上，利用闭包
export const getData = (payload) => {
  // 内层函数，第一个参数是提交任务的dispatch,第二个参数是获取state的方法
  return (dispatch, getState) => {
    // 获取state中的数据
    console.log(getState().counter)
    // 调用方法
    dispatch(getD())
  }
}

export default counterSlice.reducer

使用

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, getData } from '../store/modules/counterSlice'

export default function Person() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <h2>Person -- {count}</h2>
      <button onClick={() => dispatch(increment())}>增加</button>
      <button onClick={() => dispatch(decrement())}>减少</button>
      <button onClick={() => dispatch(getData())}>获取数据</button>
    </div>
  )
}