一、什么是状态管理
状态管理是指在应用中维护数据状态的过程。随着应用不断变大,维护和同步数据状态的复杂度也会变得更高,因此状态管理是一个重要的问题。
状态管理的目的是
减少状态的冗余,提高代码的可读性。
减少状态的重复,提高代码的复用性。
分离业务逻辑,降低代码的耦合度。
简化状态的同步,提高代码的可维护性。
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
四、简单例子
/**
* 由于在redux4.x 版本createStore已经被废弃
* 但是 createStore 相对来说对我们了解redux又比较重要
* 那么我们就使用legacy_createStore 这个方法
* 然后给他重命名redux 就可以正常使用createStore
* 后面我们会着重讲新版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 "./day04/learn-redux";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<Provider store={store}><LearnRedux /></Provider>
);