整体路径熟悉
使用ReactToolkit创建counterStore
// counterStorel.js
import { createSlice } from "@reduxjs/toolkit";
const counterStore = createSlice({
name: "counter",
// 初始化state
initialState: {
count: 0,
},
// 修改状态的方法 同步方法 支持直接修改
reducers: {
inscrement(state) {
state.count++;
},
decrement(state) {
state.count--;
},
addToNum(state, action) {
state.count = action.payload;
},
},
});
// 解构出来actionCreater函数
const { inscrement, decrement, addToNum } = counterStore.actions;
// 获取reducer
const reducer = counterStore.reducer;
// 以按需导出的方式导出actionCreater
export { inscrement, decrement, addToNum };
// 以默认导出的方式导出reducer
export default reducer;
// store/index.js
import { configureStore } from "@reduxjs/toolkit";
// 导入子模块reducer
import counterReducer from "./modules/counterStore";
// import channelReducer from "./modules/channelStore";
const store = configureStore({
reducer: {
counter: counterReducer,
// channel: channelReducer,
},
});
export default store;
为React注入store
react-redux负责把Redux和React链接起来，内置Provider组件通过store参数把创建好的store实例注入到应用中，链接正式建立
这一段代码写在如下图位置：
React组件使用store中的数据
在React组件中使用store中的数据，需要用到一个 钩子函数 - useSelector，它的作用是把store中的数据映射到组件 中，使用样例如下：
import { useSelector } from 'react-redux'
React组件修改store中的数据
React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch，它的作用是生成提交action对象的 dispatch函数，使用样例如下：
import "./App.css";
import { useDispatch, useSelector } from "react-redux";
// 导入创建action对象的方法
import { decrement, increment } from "./store/modules/counterStore";
function App() {
const { count } = useSelector((state) => state.counter);
// 得到dispatch函数
const dispatch = useDispatch();
return (
<div>
{/* 调用dispatch提交action对象 */}
<button onClick={() => dispatch(decrement())}>-</button>
<span>{count}</span>
<button onClick={() => dispatch(increment())}>+</button>
</div>
);
}
export default App;