Redux与React环境准备、实现counter（及传参）、异步获取数据

环境说明：

一：说明
在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-redux2. 安装配套工具
npm i @reduxjs/toolkit react-redux3. 启动项目
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',// 初始化stateinitialState: {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 store3. 在src文件夹下index.js添加store配置import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './store';
import { Provider } from 'react-redux';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>
);4. 在组件内应用
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方法

异步获取数据

1. channelStore文件代码：import { createSlice } from '@reduxjs/toolkit';const channelStore = createSlice({name: 'channel',initialState: {channelList: []},reducers: {setChannels(state, payload) {state.channelList = action.payload}}
})// 异步请求部分
const { setChannels } = channelStore.actions;const fetchChannelList = () => {return async (dispatch) => {const res = await axios.get(url)dispatch(setChannels(res.data.data.channels))}
}const reducer = channelStore.reducer;
export { fetchChannelList }
export default reducer;2. src下store文件夹下index.js代码如下：import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore';
import channerReducer from './modules/channelStore';const store = configureStore({reducer: {counter: counterReducer,channerReducer}
})export default store3. 组件内应用代码如下：import { useDispatch, useSelector } from 'react-redux';
import { fetchChannelList } from './store/modules/channelStore';
import { useEffect } from 'react';function App() {const { channelList } = useSelector(state => state.channerReducer)const dispatch = useDispatch();useEffect(() => {// 获取列表数据dispatch(fetchChannelList())}, [dispatch])return (<div className="App">{channelList}</div>);
}export default App;