环境说明:
一:说明
在React中使用redux,官方要求安装两个其他插件:Redux Toolkit和react-redux
1. Redux ToolKit(RTK) - 官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式
(简化store的配置方式 内置immer支持可变式状态修改 内置thunk更好的异步创建)
2. react-redux - 用来链接Redux和React组件的中间件
----------> 获取状态
(Redux react-redux React组件)
<--------- 更新状态
二:配置基础环境
1. 使用CRA快速创建React项目
npx create-react-app react-redux
2. 安装配套工具
npm i @reduxjs/toolkit react-redux
3. 启动项目
npm run start
三:创建store文件夹
在src下创建store文件夹,并在store文件夹下创建index.js文件和modules文件夹,modules文件夹下创建如counter.js文件,图片如下所示:
创建store文件夹
实现counter(及传参)
1. 在counterStore.js编写如下代码:
import { createSlice } from '@reduxjs/toolkit'
const counterStore = createSlice({
name: 'counter',
// 初始化state
initialState: {
count: 0
},
// 修改状态的方法 同步方法 支持直接修改
reducers: {
increment(state) {
state.count++
},
decrement(state) {
state.count--
},
incrementToTen(state, action) {
console.log(action.payload); // 外层传的什么数据结构这里就是什么数据结构
state.count += action.payload.number;
}
}
})
// 解构出来actionCreater函数
const {increment, decrement, incrementToTen} = counterStore.actions;
// 获取reducer
const reducer = counterStore.reducer;
// 以按需导出的方式导出actionCreater
export {increment, decrement, incrementToTen}
// 以默认导出的方式导出reducer
export default reducer;
2. 在store文件夹下index.js编写代码如下
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore';
const store = configureStore({
reducer: {
counter: counterReducer
}
})
export default store
3. 在组件内应用
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, incrementToTen } from './store/modules/counterStore';
function App() {
const { count } = useSelector(state => state.counter) // 根据第二步命名进行解构(counter)
const dispatch = useDispatch();
const handleIncrement = () => {
dispatch(increment())
}
const handleDecrement = () => {
dispatch(decrement())
}
const handleIncrementToTen = () => {
dispatch(incrementToTen({number: 10}));
}
return (
<div className="App">
{count}
<button onClick={handleIncrement}>增加</button>
<button onClick={handleDecrement}>减小</button>
<button onClick={handleIncrementToTen}>增加按钮传参,默认加10</button>
</div>
);
}
export default App;
总结:
1. 组件中使用哪个hook函数获取store中的数据? useSelector
2. 组件中使用哪个hook函数获取dispatch方法? useDispatch
3. 如何得到要提交action对象? 执行store模块中导出的actionCreater方法