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

React---day11

news 来源：原创 2025/6/10 5:20:17

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;