[JavaScript知识库]结合Redux Toolkit使用React Redux

初学redux时，看了很长时间的二者（redux与react-redux）官方文档以及一些视频教程才弄明白它们的基本使用，特此记录一下其基本的使用方法（不涉及redux的工作原理），本文将实现一个小小的计数器。

创建项目并安装依赖

首先使用vite创建一个react项目,名称随便输，模板选择react即可：

npm create vite

创建好后删去无用的代码然后安装四个依赖redux、redux toolkit、react-redux、ant design,其中ant design只是为了让界面好看一些，不是必要的：

npm install redux 
npm install @reduxjs/toolkit
npm install react-redux
npm install antd

编写代码

首先在src目录下创建一个用于存放redux相关代码的目录src/redux,在该目录下创建两个文件：store.js与counterSlice.js,并分别写入以下代码:

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0
}

const counterSlice = createSlice({
  name:'counter',
  initialState,
  reducers:{
    increase(state,action){
      //在UI界面调用该同名的action creator方法创建action对象是传入的对象将被包装到action.payload上
      state.value += action.payload.data
    },
    decrease(state,action){
      state.value -= action.payload.data
    }
  }
})

//导出与reducer同名的action creator函数
export const { increase,decrease } = counterSlice.actions 

export default counterSlice.reducer

//store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

const store = configureStore({
  reducer:{
    counter: counterReducer
  }
})

export default store

主要思路是首先借助redux toolkit提供的createSlice方法创建切片，关于切片，redux官网有如下描述：

Redux Toolkit 有一个名为 createSlice 的函数，它负责生成 action 类型字符串、action creator 函数和 action 对象的工作。您所要做的就是为这个切片定义一个名称，编写一个包含 reducer 函数的对象，它会自动生成相应的 action 代码。

然后导出counterSlice的reducer（跟createSlice方法的参数中的reducers不是一回事）字段，同时从counterSlice的actions字段中导出与reducer方法同名的action creator方法。然后来到store.js中，使用redux toolkit提供的configureStore 方法创建sotre对象。再然后来到react程序的入口文件main.jsx中，导入store对象，并用react redux提供的Provider组件包裹App组件，这样App即起下方所有组件都可以正常使用react redux提供给的各个钩子函数了。关于UI界面，直接在App组件中写了，代码如下：

//App.jsx
import { useState } from 'react'
import {Button, Col, Row, Select} from 'antd'
import { useSelector,useDispatch } from 'react-redux'
import { increase,decrease } from './redux/counterSlice'

const {Option} = Select

function App() {
  const [selectCount, setSelectCount] = useState(0)
  //使用该hook从store中获取需要的数据
  const counter = useSelector(store => store.counter.value)
  //使用hook进行action的分发
  const dispatch = useDispatch()

  const handleIncrease = () => {
    // dispatch方法的参数为action creator函数，其参数将被
    // 包装到reducer函数的action参数的payload字段上
    dispatch(increase({
      data: selectCount
    }))
  }
  const handleDecrease = () => {
    dispatch(decrease({
      data: selectCount
    }))
  }

  return (
    <div>
      <Row>
        <Col offset={9} span={6}>
        <h1>当前count值:{counter}</h1>
        </Col>
      </Row>
      <Row>
        <Col offset={8} span={10}>
          <Select value={selectCount} onChange={ value => setSelectCount(value)} placeholder="选择一个数字">
            <Option value={1}>1</Option>
            <Option value={2}>2</Option>
            <Option value={3}>3</Option>
          </Select>
          <Button onClick={handleIncrease}>增加</Button>
          <Button onClick={handleDecrease}>减少</Button>
          {/* <Button>奇数则增加</Button>
          <Button>偶数则减少</Button> */}
        </Col>
      </Row>
    </div>
  )
}

export default App

界面如下图所示：

其中比较重要的是react redux提供的两个钩子函数（钩子函数不止这两个，具体可见官网），useSelector用户从store对象中提取所需的状态，useDispatch可以获得一个dispatch方法，用于分发action，action通过上文提到的action creator函数创建，使用方法可参考代码。
至此就借助react redux实现了一个小小的计数器：

本人学习者，如有错误恳请指正