一、什么是状态管理

状态管理是指在应用中维护数据状态的过程。随着应用不断变大，维护和同步数据状态的复杂度也会变得更高，因此状态管理是一个重要的问题。

状态管理的目的是

减少状态的冗余，提高代码的可读性。

减少状态的重复，提高代码的复用性。

分离业务逻辑，降低代码的耦合度。

简化状态的同步，提高代码的可维护性。

React 本身并不提供状态管理工具，但是我们可以使用它提供的钩子，如 useState 和 useContext，结合其他状态管理工具，如 Redux 和 MobX，实现应用的状态管理。

二、redux

1、redux简介

Redux 是一种 JavaScript 库，用于管理应用的全局状态。它的目的是帮助开发者管理和同步应用中的数据状态，以实现组件间的数据共享和通信。

Redux 遵循了一种单向数据流的架构模式，将整个应用的状态数据存储在一个全局的状态树（即 store）中，并通过明确的操作，比如 dispatch 一个 action，来修改数据状态。这样可以有效地降低数据状态的耦合度，使得代码更加可维护和可读。

讯享网

Redux 还支持中间件（middleware）和插件（plugins），允许开发者扩展其功能，以适应不同的业务需求。它也支持热加载（hot reloading），可以在不重启应用的情况下更新代码。

总的来说，Redux 是一个用于简化应用状态管理的工具，广泛应用在 React 和其他前端框架中。

3、react-redux

这是一个 React 的绑定库，用于将 Redux 与 React 应用程序集成。它提供了绑定 React 组件与 Redux store 的方法，并且可以帮助您更方便地使用 Redux 库管理 React 应用程序的状态

三、安装

npm install redux react-redux

四、简单例子

1、创建store.js文件

讯享网/ * 由于在redux4.x 版本createStore已经被废弃 * 但是 createStore 相对来说对我们了解redux有比较重要 * 那么，我们就引入legacy_createStore 这个方法 * 然后给他重命名redux 就可以正常使用createStore * 后面我们会着重讲新版redux的用法 * */ import { legacy_createStore as createStore } from "redux"; // 初始状态 const initialState = { count: 0, }; // Reducer 函数，处理对 state 的修改 function reducer(state = initialState, action) { switch (action.type) { case "INCREMENT": // 返回一个新的状态对象，count 加一 return { ...state, count: state.count + 1 }; case "DECREMENT": // 返回一个新的状态对象，count 减一 return { ...state, count: state.count - 1 }; default: // 默认情况下，返回原来的状态 return state; } } // 创建 store const store = createStore(reducer); // 导出 store export default store; 

2、创建learn-redux.jsx

import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; function Counter() { const count = useSelector(state => state.count); const dispatch = useDispatch(); return ( <div> <p>Count: {count}</p> <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button> </div> ); } export default Counter; 

3、入口文件修改

讯享网import React from "react"; import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; import LearnRedux from "./learn-redux"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Provider store={store}> <LearnRedux /> </Provider> ); 

五、redux store

1、概念

Redux 是一个用于管理 JavaScript 应用状态的库。在 Redux 中，整个应用的状态都存储在一个对象中，称为 store。
Store 实际上是一个 JavaScript 对象，它存储了整个应用的状态。它是唯一的，意味着应用中只有一个 store。每当状态发生变化，它会存储最新的状态。
使用 Redux 时，你可以通过调用 store.getState() 来获取当前应用的状态，通过调用 store.dispatch(action) 来更新应用的状态，其中 action 是一个描述发生了什么的对象。
总的来说，store 是 Redux 应用的核心部分，它存储了整个应用的状态，并提供了读取和更新状态的方法。

2、定义store

import { createStore } from 'redux'; // 定义初始状态 const initialState = { count: 0 }; // 定义reducer function reducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } } // 使用createStore创建store const store = createStore(reducer); export default store

3、页面中获取store中定义的数据

讯享网import React from 'react'; import { useSelector } from 'react-redux'; function Counter() { / * 使用useSelector这个钩子来获取store中的state * 接收一个回调函数，state就是我么你定义的state * 需要那个属性可以直接return对象的属性 */ const count = useSelector(state => state.count); return ( <div> <div>Count: {count}</div> </div> ); } export default Counter; 

4、store常用的方法

1、store.getState

// 返回应用当前的 state。 它与 store 的最后一个 reducer 返回值相同。 store.getState() 

2、store.dispatch

讯享网// dispatch action。这是触发 state 变化的惟一途径。 store.dispatch()

3、store.subscribe

添加一个变化监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。返回一个可以销毁监听的函数。

const unsubscribe = store.subscribe(handleChange)

5、模块化处理

1、combineReducers

使用combineReducers可以对redux进行模块化管理，在 Redux 中，你可以使用多个 Reducer 来处理不同的数据，然后使用 combineReducers 函数将它们合并起来。

2、创建user模块