grtsinry43/frontend-new-react

Fork 0

DuYi 46dce38662 auto commit

2024-08-27 10:10:05 +08:00

6.0 KiB

Raw Blame History

React-redux 介绍

什么是状态管理
Redux 的核心思想
React-redux 介绍

什么是状态管理

所谓状态管理，指的是把组件之间需要共享的状态抽取出来，遵循特定的约定，统一来管理，让状态的变化可以预测。

组件之间通常会有一些共享的状态，在 Vue 或者 React 中我们一般会将这部分状态提升至公共父组件的 props 中，由父组件来统一管理共享的状态，状态的改变也是由父组件执行并向下传递。这样会导致两个问题:

需要将共享的状态提升至公共的父组件，若无公共的父组件，往往需要自行构造
状态由父组件自上而下逐层传递，若组件层级过多，数据传递会变得很冗杂

此时，我们就需要一个统一的仓库来对组件状态进行管理，如下图：

Redux 的核心思想

早期的时候，React 官方提供了 Flux，Flux 的特点如下：

单向数据流。视图事件或者外部测试用例发出 Action ，经由 Dispatcher 派发给 Store ，Store 会触发相应的方法更新数据、更新视图
Store 可以有多个
Store 不仅存放数据，还封装了处理数据的方法

2015 年的时候，Dan Abramov 推出的 Redux 席卷了整个 React 社区，Redux 本质就是在 Flux 上做了一些更新：

单向数据流。View 发出 Action (store.dispatch(action))，Store 调用 Reducer 计算出新的 state ，若 state 产生变化，则调用监听函数重新渲染 View （store.subscribe(render)）
单一数据源，只有一个 Store
state 是只读的，每次状态更新之后只能返回一个新的 state
没有 Dispatcher ，而是在 Store 中集成了 dispatch 方法，store.dispatch() 是 View 发出 Action 的唯一途径
支持使用中间件（Middleware）管理异步数据流

Redux 官网：https://redux.js.org/

Redux 数据流：

Redux 示例：ToDoList

在浏览器中使用 redux 扩展工具，首先需要打开谷歌浏览器的扩展应用商店，下载 redux devtools

接下来需要在创建 store 的地方，添加如下的代码：

export const store = createStore(
    todoReducer,
  + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

详细可以参阅：https://github.com/zalmoxisus/redux-devtools-extension#usage

获取仓库仓库：store.getState( )
派发 action：store.dispatch( action object)
订阅：store.subscribre( )

React-redux 介绍

Redux 是一个独立的第三方库，之后 React 官方在 Redux 的基础上推出了 React-redux：https://react-redux.js.org/

最新版的 React-redux，已经全面拥抱了 Hooks，内置了诸如：

useSelector
useDispatch
useStore

一类的 Hook，我们只要掌握这一类 Hook，就可以轻松上手。

另外，Redux 官方还推出了 Redux Toolkit，来简化整个 Redux 的使用。官方文档：https://redux-toolkit.js.org/

因此现在在 React 应用中，状态管理库的使用一般都是 React-redux + Redux Toolkit

React-redux 示例：ToDoList

首先第一个安装两个依赖，命令如下：

npm install @reduxjs/toolkit react-redux

Redux 目录中的 4 个文件会直接简化为 2 个，有些东西不需要我们再写了，会有 toolkit 自动帮我们生成。

index.js 的变化，需要从 react-redux 中引入 Provider 的组件，用于提供一个上下文环境，包裹应用的根组件，之后仓库会做为 Provider 的 store 属性，不需要再在 App.jsx 根组件上面挂载了

// ....
import { Provider } from "react-redux";

// 引入仓库
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

store.js 的变化，从 toolkit 里面引入 configureStore 方法，用于创建我们的数据仓库

// 引入创建仓库的方法
import { configureStore } from "@reduxjs/toolkit";

// 调用该方法时，传入一个配置对象
// 其中一个选项是配置 reducer
export default configureStore({
    reducer : {

    }
});

组件连接仓库的改变，之前使用 redux 的时候，组件还是需要从父组件传递的 props 上面拿到仓库数据，现在可以通过 useSelector 这个 Hook 直接连接仓库

const {list} = useSelector(state=>state.todo);

组件向仓库派发 action 时的改变，首先是获取 dispatch 方法的方式，之前使用纯 redux 的时候，dispatch 是通过 store 拿到的，现在是通过 useDispatch 来拿到。

 dispatch(add(value));

action 之前是通过我们自己书写的 action creator 来创建的，现在是直接从 slice 里面导出即可。

export const {add,del,change} = todolistSlice.actions;

和后端进行交互

一般来讲，当数据发生变化时，不仅仅是前端的状态库要更新数据，服务器端也要对应的对数据进行更新，此时的更新流程如下：

和后端交互示例：学生管理系统

6.0 KiB Raw Blame History Unescape Escape

React-redux 介绍

什么是状态管理

Redux 的核心思想

React-redux 介绍

6.0 KiB

Raw Blame History