React学习———Redux 、 React Redux和react-persist

news2025/5/17 2:09:44

Redux

Redux是一个流行的JavaScript状态管理库，通常用于React等前端框架结合使用。Redux 的设计思想是让应用的状态变得可预测、可追踪、易于调试和测试。

Redux的核心l理念

单一数据源：整个应用的状态被存储在一个唯一的Store对象中，所有组件都从这个Store读取数据
状态只读：唯一改变状态的方法时触发action，不能直接修改state
使用纯函数来执行修改：Reducer处理器是函数，接收当前的store和action，返回新的state，不产生副作用

Redux的核心概念

Store：是Redux的核心，它是一个包含整个应用程序状态的对象。Redux应用只有一个单一的Store，通过createStore函数创建。提供了以下的方法
- getStore()：获取当前状态
- dispatch(action)：触发状态更新
- subscribe(listener)：监听状态变化
Action：一个普通的JavaScript对象，用于描述状态的变化，它必须有type字段，表示动作的类型，可以有其他自定义数据

const incrementAction = {
	type: 'INCREATE',
	payload: 1
}

Reducer:：是一个纯函数，接受当前state和action作为参数，并返回一个新的状态。Reducer必须保持纯函数特性，既不直接修改原状态，而是返回一个新的状态对象

function counterReducer(state = 0,action){
	switch(action.type){
		case 'INCREATE':
			return state + action.payload;
		default:
			return state
	}
}

Dispatch：用于触发action，通过调用store.dispatch(action)。React会将action传递给Reducer，从而更新状态
Subscribe：订阅Store的状态，通常用于UI更新

Redux的工作流程

组件通过dispatch发送一个action
Store接收到action，调用reduce
Reducer根据action的类型和数据，返回新的state
Store更新state，通知订阅的组件重新渲染

React Redux

React Redux是官方推荐的React与Redux结合使用的库，主要作用是让React组件可以方便的访问和操作Redux的全局状态。它极大的简化了React项目中全局状态的管理和组件间的数据通信

React Redux的核心功能

Provider组件：用于将Redux的store注入到整个React应用中。只需在应用的根组件外包裹一次，所有的子组件都能访问到Redux的状态

import { Provider } from 'react-redux'
import { store } from './store'
<Provider store={ store }>
	<App />
</Provider>

useSelector：在函数组件获取Redux store里的状态；只会在依赖的状态变化时自动触发组件重新渲染

import { useSelector } from 'react-redux'
const menuIndex = useSelector(state => state.head.menuIndex)

useDispatch：获取dispatch方法，用于分发action，触发reduce更新状态

import { useDispatch } from 'react-redux'
const dispatch = useDispatch()
dispatch({type: 'SET_MENU', payload: 1})

connect（高阶组件）：用于将Redux的state和dispatch方法“连接”到React组件的props上。它主要用于类组件或早期函数组件（在hooks出现之前），现在虽然推荐使用useSelector和useDispatch，但connect依然在很多老项目和复杂场景下被广泛使用

import { connect } from ‘react-redux’

// 1、映射 state 到 props
const mapStateProps = (state) => ({
	menuIndex: state.head.menuIndex
})

// 2、映射 dispatch 到 props
const mapDispatchProps = (dispatch) => ({
	setMenu: (index) => dispatch({type: 'SET_MENU'})
})

// 3、用connect包裹组件
class MyComponent extends React.Component {
	render(){
		const { menuIndex, setMenu } = this.props
		return (
			<div>
				<span>{menuIndex}</span>
				<button onClick={() => setMenu(1)}>切换菜单</button>
			</div>
		)
	}
}
export default connect(mapStateProps, mapDispatchProps)(MyComponent)

React Redux的工作流程

创建Store：使用createStore或configureStore创建React store，并定义初始状态和reducer
提供Store：通过Provider将store注入到React应用中
连接组件：使用connect或Hooks API（useSelector、useDispatch）将组件与React store连接，获取状态和操作
更新状态：组件通过dispatch操作触发状态更新，Redux根据reduce更新store的状态
重新渲染：组件根据新的状态重新渲染，完成UI更新

react-persist

react-persist是一个用于持久化Redux状态的库，它的作用是：把Redux store中的数据自动保存到本地存储（如localStorage、sessionStorage、IndexedDB等），页面刷新或关闭后再打开，状态依然能恢复

基本使用

安装：npm install redux-persist
配置

/** @format
 * createStore： 创建redux store
 * persistStore ：持久化redux store
 * persistCombineReducers： 持久化多个reducer
 * storage：使用浏览器的lcaolStorage作为持久化存储介质
 */
import { legacy_createStore as createStore } from 'redux'
import { persistStore, persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认 localStorage

import user from './reducers/user'
import head from './reducers/head'

const persistConfig = {
  key: 'root', // 本地存储的key名
  storage, //存储方式 也可以用 sessionStorage 或自定义
  // whitelist: 只持久化那些reducer
  // blacklist：不持久化哪些reducer
  
}
// 将多个reduce合并
const reducers = { user, head }
//  创建持久化存储的reducer
const persistedReducer = persistCombineReducers(persistConfig, reducers)
const store = createStore(persistedReducer)
const persist = persistStore(store)

export { store, persist }

在React 项目入口文件使用

/**
 * PersistGate：用于在 React 应用中延迟渲染 UI，直到 Redux 持久化的数据恢复完成。
 * 当你用 redux-persist 持久化 Redux 状态时，页面刷新后需要先从本地存储（如 localStorage）恢复数据。
 * PersistGate 会在数据还原完成前，先渲染 loading 指定的内容（比如 loading 动画或 null），等数据恢复好后再渲染你的应用。
 */
import { Provider } from ‘react-redux’
// PersistGate 组件会在状态恢复完成后再渲染应用，避免“闪屏”
import { PersistGate } from 'redux-persist/integration/react'
import { store, persist } from './store'

<Provider store={store}>
	// persistor={persist} 是redux-persist创建的持久化控制对象
	<PersistGate loading={null} persistor={persist}></PersistGate>
</Provider>