初学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
实现了一个小小的计数器:
本人学习者,如有错误恳请指正