14.4 react-redux第三方库
提供connect、thunk之类的函数
以获取一个banner数据为例子
store：
我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数
import { configureStore } from '@reduxjs/toolkit';//Redux Toolkit 推荐的创建 store 的方法，自动集成了开发工具和中间件。
import rootReducer from './reducer/reducer.js'//项目中所有 reducer 的集合
//configureStore 已经自动集成了 redux-thunk
const store = configureStore({ reducer: rootReducer });
export default store;
action：
import { CHANGE_BANNERS } from './constant.js' // 导入 action 类型常量
import axios from 'axios' // 导入 axios 用于发起 HTTP 请求
// 普通 action creator，返回一个 action 对象
export const changeBannersAction = (data) => ({
type: CHANGE_BANNERS, // action 类型
payload: data // 传递的数据
});
**reducer：**我们是先写了一个总的reducer,合并多个 reducer，生成根 reducer 并导出，用于 Redux 的全局状态管理。
import { combineReducers } from 'redux';
import bannerReducer from './bannerReducer';
const rootReducer = combineReducers({
banner : bannerReducer
});
export default rootReducer;
分reducer:bannerReducer：
import { CHANGE_BANNERS } from "../constant"
// 初始化状态
const initailState = {
banner : []
}
// 据不同的 action 类型决定如何更新 state。
const bannerReducer = (state = initailState , action) => {
switch(action.type){
default:
return state;
}
}
export default bannerReducer;
constant:
定义一些常量
引入store:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './store';
// 引用provider将store进行传递
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
为什么要使用中间件？？？因为reducer必须是纯函数，这意味着它不能直接处理异步操作，异步操作必须在action之后的中间件处理之后生成原始的action，这样，reducer函数就能处理相应的action，从而改变state，更新UI。
thunk有什么缺点：
- Redux Thunk 在处理异步操作时，通常需要编写大量的样板代码。
- Redux Thunk 将异步逻辑与 Redux 的 action 紧密耦合在一起。这意味着 action creator 不仅需要定义 action 类型，还需要处理异步逻辑。
saga:
引入：创建中间件，应用中间件，run中间件
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import mySaga from './saga';
import rootReducer from './reducer';
// 创建saga中间件
const sagaMiddleware = createSagaMiddleware();
// 定义store:reducer+中间件
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(sagaMiddleware)
});
// 使用中间件
sagaMiddleware.run(mySaga);
export default store;
saga.js中监听actionTyp然后执行逻辑代码
import {put, takeEvery} from 'redux-saga/effects'
import axios from 'axios'
import { FETCH_HOME_MULTIDATA } from './constant';
import { changeBannersAction } from './actionCreator';
// 定义异步函数：*
function* fetchHomeMultidata(){
const res = yield axios.get('http://123.207.32.32:8000/home/multidata')
const banner = res.data.data.banner.list;
// 发送
yield put(changeBannersAction(banner))
}
// 监听
function* mySaga(){
yield takeEvery( FETCH_HOME_MULTIDATA, fetchHomeMultidata )
}
export default mySaga;
redux-thunk
const store = configureStore({ reducer: rootReducer });
export default store;
**action**：
import { CHANGE_BANNERS } from ‘./constant.js’ // 导入 action 类型常量
import axios from ‘axios’ // 导入 axios 用于发起 HTTP 请求
// 普通 action creator，返回一个 action 对象
export const changeBannersAction = (data) => ({
type: CHANGE_BANNERS, // action 类型
payload: data // 传递的数据
});
**reducer：**我们是先写了一个总的reducer,合并多个 reducer，生成根 reducer 并导出，用于 Redux 的全局状态管理。
import { combineReducers } from ‘redux’;
import bannerReducer from ‘./bannerReducer’;
const rootReducer = combineReducers({
banner : bannerReducer
});
export default rootReducer;
分reducer:**bannerReducer**：
import { CHANGE_BANNERS } from “…/constant”
// 初始化状态
const initailState = {
banner : []
}
// 据不同的 action 类型决定如何更新 state。
const bannerReducer = (state = initailState , action) => {
switch(action.type){
default:
return state;
}
}
export default bannerReducer;
constant:
定义一些常量
**引入store:**
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App’;
import store from ‘./store’;
// 引用provider将store进行传递
import { Provider } from ‘react-redux’;
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
);
为什么要使用中间件？？？因为reducer必须是纯函数，这意味着它不能直接处理异步操作，异步操作必须在action之后的中间件处理之后**生成原始的action，这样，reducer函数就能处理相应的action，从而改变state，更新UI。**
thunk有什么缺点：
- Redux Thunk 在处理异步操作时，通常需要编写大量的样板代码。
- Redux Thunk 将异步逻辑与 Redux 的 action 紧密耦合在一起。这意味着 action creator 不仅需要定义 action 类型，还需要处理异步逻辑。
saga:
引入：创建中间件，应用中间件，run中间件
import { configureStore } from ‘@reduxjs/toolkit’;
import createSagaMiddleware from ‘redux-saga’;
import mySaga from ‘./saga’;
import rootReducer from ‘./reducer’;
// 创建saga中间件
const sagaMiddleware = createSagaMiddleware();
// 定义store:reducer+中间件
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(sagaMiddleware)
});
// 使用中间件
sagaMiddleware.run(mySaga);
export default store;
saga.js中监听actionTyp然后执行逻辑代码
import {put, takeEvery} from ‘redux-saga/effects’
import axios from ‘axios’
import { FETCH_HOME_MULTIDATA } from ‘./constant’;
import { changeBannersAction } from ‘./actionCreator’;
// 定义异步函数：*
function* fetchHomeMultidata(){
const res = yield axios.get(‘http://123.207.32.32:8000/home/multidata’)
const banner = res.data.data.banner.list;
// 发送
yield put(changeBannersAction(banner))
}
// 监听
function* mySaga(){
yield takeEvery( FETCH_HOME_MULTIDATA, fetchHomeMultidata )
}
export default mySaga;
