Redux基本使用

纯函数：1.函数内部不能依赖函数外部变量；2.不能产生副作用，在函数内部改变函数外部的变量

React只帮我们解决了DOM的渲染过程，State还是要由我们自己来管理——redux可帮助我们进行管理

Redux三大特点

1.单一数据源：整个应用的状态存储在一个单一的对象树,且该对象树只存储在一个store中

2.State是只读的：状态是不可直接修改的，必须通过触发一个“action”来发起状态的变更

3.使用纯函数来完成状态变更：通过reducer将旧state和actions联系在一起，并返回一个新的state;不产生任何副作用。

Redux测试项目搭建

step1:项目初始化

npm init

step2:安装redux

npm i redux

step3:创建store仓库,并存储数据

const { createStore } = require('redux');
const {reducer} = require('./reducer');// 创建的store
const store = createStore(reducer);module.exports = store;

step4:创建reducer函数

const { ADD_NUMBER, CHANGE_NAME } = require("./constants")// 初始化的数据
const initialState = {name: "why",counter: 100
}function reducer(state = initialState, action) {switch(action.type) {case CHANGE_NAME:return { ...state, name: action.name }case ADD_NUMBER:return { ...state, counter: state.counter + action.num }default:return state}
}module.exports = reducer

注意：在该代码中，我们将action的类型封装到了constants.js文件中，方便复用

const ADD_NUMBER = "add_number"
const CHANGE_NAME = "change_name"module.exports = {ADD_NUMBER,CHANGE_NAME
}

step5:通过action来修改state

将它封装到一个单独的文件中

const { ADD_NUMBER, CHANGE_NAME } = require("./constants")const changeNameAction = (name) => ({type: CHANGE_NAME,name
})const addNumberAction = (num) => ({type: ADD_NUMBER,num
})module.exports = {changeNameAction,addNumberAction
}

然后在使用的组件中进行调用

const store = require("./store")
const { addNumberAction, changeNameAction } = require("./store/actionCreators")const unsubscribe = store.subscribe(() => {console.log("订阅数据的变化:", store.getState())
})// 修改store中的数据: 必须action
store.dispatch(changeNameAction("kobe"))
store.dispatch(changeNameAction("lilei"))
store.dispatch(changeNameAction("james"))unsubscribe()// 修改counter
store.dispatch(addNumberAction(10))
store.dispatch(addNumberAction(20))
store.dispatch(addNumberAction(30))

最终，通过拆分代码我们会形成4个文件：

1. store/index.js文件
2. store/reducer.js文件
3. store/actionCreators.js文件
4. store/constants.js文件

React中使用Redux

redux使用过程：首先会在一个中心的store里面存储我们对应的状态，然后就可以让一些组件中store中订阅一些数据；然后也可以在组件中通过dispatch来派发一些action,这些action就会到达Reducer里面，它就会自动执行该函数，并返回一个新的state对象，再根据新的state来更新数据。数据更新后就会自动告诉订阅者，我现在数据发生改变了，需要拿新数据，界面再重新渲染

step1:创建一个项目并安装redux

step2:创建store

step3:在组件中使用

import React, {PureComponent } from 'react'
import Home from './pages/Home'
import Profile from './pages/profile'
import "./style.css"
import store from './store'export class App extends PureComponent {constructor() {super()this.state = {count: store.getState().count}}componentDidMount() {// 订阅storestore.subscribe(() => {const state = store.getState()this.setState({count: state.count})})}render() {const {count} = this.statereturn (<div><h2>App Count: {count}</h2><div className="pages"><Home /><Profile /></div></div>)}
}export default App

React-Redux

redux官方帮助我们提供了 react-redux 库，可简化在react中使用redux的过程

npm i react-reduxyarn add react-redux

Provider

在src/index.js中导入Provider,并包裹根组件→将Redux的store传递给整个应用程序→使得所有组件可访问Redux的状态

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);

connect

connect是React-redux提供的一个高阶组件（HOC），用于将React组件与Redux的仓库联系起来；

它不会修改原始组件，而是返回一个新的、连接了Redux的组件

作用：

将Redux的状态（state) 和（dispatch)映射到组件的props中

通过 mapStateToProps 和 mapDispatchToProps，可以自定义组件需要的状态和操作

import axios from "axios"
import * as actionTypes from  "./constants"export const calcNumber = (num) => {return {type:actionTypes.CALC_NUMBER,num}
}

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { calcNumber } from '../store/actionCreators'export class About extends PureComponent {calcNumber(num) {this.props.calcNumber(num)}render() {const {count,banners, recommends} = this.propsreturn (<div><h2>About:{count}</h2><button onClick={e => this.props.calcNumber(6)}>+6</button><button onClick={e => this.props.calcNumber(-6)}>-6</button><button onClick={e => this.props.calcNumber(10)}>+10</button><button onClick={e => this.props.calcNumber(-5)}>-5</button><div className="banners"><h2>轮播图数据：</h2><ul>{banners.map(item => {return <li key={item.acm}>{item.title}</li>})}</ul></div><div className="recommend"><h2>推荐数据</h2><ul>{recommends.map(item => {return <li key={item.acm}>{item.title}</li>})}</ul></div></div>)}
}function mapStateToProps(state){return {count: state.count,banners:state.banners,recommends:state.recommends}
}const mapDispatchToProps = (dispatch) => {return {calcNumber(num) {dispatch(calcNumber(num))}}
}// connect()返回值是一个高阶组件
export default connect(mapStateToProps,mapDispatchToProps)(About)

组件中进行异步操作

网络请求可以在class组件的componentDidMount中发送

store/home.js 

import axios from "axios"
import * as actionTypes from  "./constants"export const changeBanners = (banners) => {return {type:actionTypes.CHANGE_BANNERS,banners}
}export const changeRecommends = (recommends) => {return {type:actionTypes.CHANGE_RECOMMENDS,recommends}
}

Home.jsx 

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'
import { changeBanners, changeRecommends } from '../store/actionCreators'export class Category extends PureComponent {componentDidMount() {axios.get("http://123.207.32.32:8000/home/multidata").then(res => {const banners = res.data.data.banner.listconst recommends = res.data.data.recommend.listthis.props.changeBanners(banners)this.props.changeRecommends(recommends)})}render() {return (<div><h2>Category Page:</h2></div>)}
}const mapDispatchToProps = (dispatch) => {return {changeBanners(banners) {dispatch(changeBanners(banners))},changeRecommends(recommends) {dispatch(changeRecommends(recommends))}}
}export default connect(null,mapDispatchToProps)(Category)

redux中进行异步操作

网络请求的数据也属于状态管理的一部分，我们最好还是将它放在redux中来管理

在默认情况下，dispatch(action)中传入的是一个对象→可通过reduc-thunk让dispatch中传入一个action函数

step1:安装redux-thunk

npm i redux-thunk

step2:在创建store时传入应用了middleware的enhance函数

• 通过applyMiddleware来结合多个Middleware, 返回一个enhancer；
• 将enhancer作为第二个参数传入到createStore中；

import { createStore,applyMiddleware } from "redux";
import {thunk} from "redux-thunk"
import reducer from "./reducer";// 正常情况下，store.dispatch(object) 只能派发一个对象
// 想要派发函数store.dispatch(function) 需要做一个增强
const store = createStore(reducer,applyMiddleware(thunk))export default store

step3:定义返回一个函数的action

import axios from "axios"
import * as actionTypes from  "./constants"export const changeBanners = (banners) => {return {type:actionTypes.CHANGE_BANNERS,banners}
}export const changeRecommends = (recommends) => {return {type:actionTypes.CHANGE_RECOMMENDS,recommends}
}export const fetchHomeMultidataAction = () => {// 如果是一个普通的action,那么我们需要返回一个对象// 问题：对象中不能直接拿到从服务器请求的数据// return {}return function(dispatch,getState) {// 异步操作：网络请求axios.get("http://123.207.32.32:8000/home/multidata").then(res => {const banners = res.data.data.banner.listconst recommends = res.data.data.recommend.list// dispatch({type:actionTypes.CHANGE_BANNERS,banners})// dispatch({type:actionTypes.CHANGE_RECOMMENDS,recommends})dispatch(changeBanners(banners))dispatch(changeRecommends(recommends))})}
}

step4:在组件中进行派发

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { fetchHomeMultidataAction } from '../store/actionCreators'export class Category extends PureComponent {componentDidMount() {this.props.fetchHomeMultidata()}render() {return (<div><h2>Category Page:</h2></div>)}
}const mapDispatchToProps = (dispatch) => {return {fetchHomeMultidata() {dispatch(fetchHomeMultidataAction())}}
}export default connect(null,mapDispatchToProps)(Category)

Redux模块拆分

在开发中，如果将所有的数据都存储在一个state中，随着数据越来越多，会难以管理与维护；

我们可以对其进行模块的拆分

combineReducers底层原理

redux给我们提供了一个combineReducers函数可以方便的让我们对多个reducer进行合并

实现原理：

• 将我们传入的reducers合并到一个对象中，最终返回一个combination函数
• 在执行combination函数的过程中，会通过判断前后返回的数据是否相同来决定返回之前的state还是新的state
• 新的state会触发订阅者发生对应的刷新，而旧的state可以有效的组织订阅者发生刷新

// 实现原理
function reducer(state={},action) {// 返回一个对象，作为store的状态return {count:counterReducer(state.count,action),home:homeReducer(state.home,action),user:userReducer(state.user,action)}
}

Redux Toolkit（RTK）

简介

它封装了Redux的核心API，并提供了一些额外工具和约定，帮助我们更高效编写Redux代码

安装：

npm install @reduxjs/toolkit react-redux

核心API：

• configureStore:它自动配置了 Redux 的 createStore 和 applyMiddleware，并预装了一些常用的中间件（如 redux-thunk 和 redux-devtools-extension）
• createSlice:接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的actions
• createAsyncThunk:接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk

基本使用

1.configureStore创建大仓库store

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./modules/counter";const store = configureStore({reducer: {count: counterReducer,},
});export default store;

2.createSlice创建小仓库

import { createSlice } from "@reduxjs/toolkit";const counterSlice = createSlice({name: "counter",initialState: {count: 100},reducers: {increment: (state, action) => {state.count += action.payload;},decrement: (state, action) => {state.count -= action.payload;}}   
})export const{increment, decrement} = counterSlice.actions
export default counterSlice.reducer;

3.将模块的reducer导入大仓库中

4.在组件中使用数据——还是和之前一样（Provider、connect）

异步使用

1.使用 createAsyncThunk 创建异步操作

2. 在 createSlice 中处理异步操作的结果

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";export const fetchHomeMultidataAction = createAsyncThunk("home/multidata", async () => {const res = await axios.get("http://123.207.32.32:8000/home/multidata");// 返回结构，那么action状态就会变成fulfilled状态return res.data;
});const homeSlice = createSlice({name: "home",initialState: {banners: [],recommends: []},reducers: {changeBanners(state, { payload }) {state.banners = payload;},changeRecommends(state, { payload }) {state.recommends = payload;}},extraReducers: (builder) => {builder.addCase(fetchHomeMultidataAction.pending, (state, action) => {console.log("fetchHomeMultidataAction pending");}).addCase(fetchHomeMultidataAction.fulfilled, (state, action) => {console.log("fetchHomeMultidataAction fulfilled");// 这里的数据不需要浅拷贝——因为内部的ImmutableJS重构了redux,并返回了一个新对象state.banners = action.payload.data.banner.list;state.recommends = action.payload.data.recommend.list;}).addCase(fetchHomeMultidataAction.rejected, (state, action) => {console.log("fetchHomeMultidataAction rejected");});}
});export const { changeBanners, changeRecommends } = homeSlice.actions;
export default homeSlice.reducer;

3.在组件中调用该函数即可——与原来使用一样