第43节——redux介绍

一、什么是状态管理

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

状态管理的目的是

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

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

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

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

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

四、简单例子

/**

* 由于在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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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 (
    

      
Count: {count}
       dispatch({ type: 'INCREMENT' })}>+
       dispatch({ type: 'DECREMENT' })}>-
    
  );
}

export default Counter;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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(
  
    
  
);
1
2
3
4
5
6
7
8
9
10
11
12
13