状态管理是指在应用中维护数据状态的过程。随着应用不断变大,维护和同步数据状态的复杂度也会变得更高,因此状态管理是一个重要的问题。
减少状态的冗余,提高代码的可读性。
减少状态的重复,提高代码的复用性。
分离业务逻辑,降低代码的耦合度。
简化状态的同步,提高代码的可维护性。
React 本身并不提供状态管理工具,但是我们可以使用它提供的钩子,如 useState 和 useContext,结合其他状态管理工具,如 Redux 和 MobX,实现应用的状态管理。
Redux 是一种 JavaScript 库,用于管理应用的全局状态。它的目的是帮助开发者管理和同步应用中的数据状态,以实现组件间的数据共享和通信。
Redux 遵循了一种单向数据流的架构模式,将整个应用的状态数据存储在一个全局的状态树(即 store)中,并通过明确的操作,比如 dispatch 一个 action,来修改数据状态。这样可以有效地降低数据状态的耦合度,使得代码更加可维护和可读。
Redux 还支持中间件(middleware)和插件(plugins),允许开发者扩展其功能,以适应不同的业务需求。它也支持热加载(hot reloading),可以在不重启应用的情况下更新代码。
总的来说,Redux 是一个用于简化应用状态管理的工具,广泛应用在 React 和其他前端框架中。
这是一个 React 的绑定库,用于将 Redux 与 React 应用程序集成。它提供了绑定 React 组件与 Redux store 的方法,并且可以帮助您更方便地使用 Redux 库管理 React 应用程序的状态
npm install redux react-redux
/**
* 由于在redux4.x 版本createStore已经被废弃
* 但是 createStore 相对来说对我们了解redux又比较重要
* 那么我们就使用legacy_createStore 这个方法
* 然后给他重命名redux 就可以正常使用createStore
* 后面我们会着重讲新版redux的用法
*
*/
/**
* 由于在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;
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
function Counter() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
Count: {count}
);
}
export default Counter;
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(
);