React---day11 - 技术栈

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;

复制代码