1. 环境搭建
插件安装：Redux Toolkit和react-redux
npm i @reduxjs/toolkit react-redux
2、
store目录结构设计
- 集中状态管理的部分会单独创建一个store目录（在src下）
- 应用通常会有很多个子模块，所以还会有个modules目录，在内部编写业务分类的子store
- store中的入口文件index.js的作用是组合modules中的所有子模块，并导出store
3、使用React Toolkit创建counterStore
创建各模块的store
counterStore.js
import { createSlice } from "@reduxjs/toolkit";// 创建store
const counterStore = createSlice({name: 'counter',// 初始化stateinitialState: {count: 0},// 修改状态的方法 reducers: {inscrement(state) {state.count++;},decrement(state) {state.count--;}}
})// 结构出actionCreater函数
const {inscrement, decrement} = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer// 以按需导出的方式导出actionCreater
export {inscrement, decrement}
// 以默认导出的方式导出reducer
export default reducer
在index,js中组合store
import { configureStore } from "@reduxjs/toolkit";
// 导入子模块reducer
import counterReducer from './modules/counterStore'const store = configureStore({reducer: {counter: counterReducer}
})export default store
4、为React注入store
React-redux负责把Redux和redux连接起来，内置Provider组件通过store参数把创建好的store实例注入到应用中。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);reportWebVitals();
5、在React组件中使用store中的数据
使用useSelector钩子函数，把store中的数据映射到组件中
import React from 'react';
import './App.css';import { useSelector } from 'react-redux';function App() {// 这里state.counter和store中的reducer.counter是对应的const {count} = useSelector(state => state.counter);return (<React.Fragment><div>{count}</div></React.Fragment>);
}export default App;6、React组件中修改store中的数据
引入useDispatch钩子函数，作用：生成提交的action对象的dispatch函数
import React from 'react';
import './App.css';import { useDispatch, useSelector } from 'react-redux';// 倒入actionCreater
import {inscrement, decrement} from './store/modules/counterStore'function App() {// 这里state.counter和store中的reducer.counter是对应的const {count} = useSelector(state => state.counter);const dispatch = useDispatch()return (<React.Fragment><div>{/* 调用dispatch提交action对象 */}<button onClick={()=> dispatch(decrement())}> - </button><span>{count}</span><button onClick={() => dispatch(inscrement())}> + </button></div></React.Fragment>);
}export default App;
7、在action中传参
在reducers的同步修改方法中添加action对象参数，在调用actionCreator时传递参数，参数会被传递到action对象的payload属性上
定义方法：通过payload获取传入的参数
import { createSlice } from "@reduxjs/toolkit";// 创建store
const counterStore = createSlice({name: 'counter',// 初始化stateinitialState: {count: 0},// 修改状态的方法 reducers: {inscrement(state) {state.count++;},decrement(state) {state.count--;},addToNum (state, action) {// payload是固定属性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
使用
<button onClick={() => dispatch(addToNum(10))}> add To 10</button><button onClick={() => dispatch(addToNum(20))}> add To 20</button>
8、异步代码
- store写法不变
- 单独封装一个函数，返回一个新函数，在新函数中：封装异步请求获取数据，并调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
channelStore.js
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";const channelStore = createSlice({name: 'channel',initialState: {channelList: []},reducers: {setChannels(state, action) {state.channelList = action.payload}}
})// 异步请求部分
const {setChannels} = channelStore.actionsconst fetchChannelList = () =>{return async (dispatch) => {const res = await axios.get('http://geek.itheima.net/v1_0/channels')dispatch(setChannels(res.data.data.channels))}
}const reducer = channelStore.reducer
export {fetchChannelList}
export default reducer- 组件中dispatch的写法保持不变
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
在组件中使用
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';// 倒入actionCreater
import { fetchChannelList } from './store/modules/channelStore';function App() {const {channelList} = useSelector(state => state.channel)const dispatch = useDispatch()useEffect(() => {dispatch(fetchChannelList())}, [])return (<React.Fragment><div>{/* 调用dispatch提交action对象 */}<ul>{channelList.map(item => <li key={item.id}>{item.name}</li>)}</ul></div></React.Fragment>);
}export default App;
