当前位置：首页 > news >正文

React-Redux学习笔记（自用）

news 来源：原创 2024/9/29 11:38:05

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;