【 React 】 React 中的公共状态管理 Redux ！

最新推荐文章于 2024-07-23 17:10:24 发布

海绵宝宝的微笑`

最新推荐文章于 2024-07-23 17:10:24 发布

阅读量521

点赞数

分类专栏： React 文章标签： reactjs

本文链接：https://blog.csdn.net/Kelly_yml/article/details/109187654

版权

Redux 是一种用于管理 React 应用状态的库，其核心思想是将所有状态集中存储并遵循单一数据源、只读状态和纯函数更新的原则。Action 是状态变化的触发者，Store 负责存储和更新状态，而 Reducer 则根据 Action 更新状态。在 React 中结合 Redux 使用，可以简化组件间的数据传递，并通过 Redux DevTools 监控数据流。

摘要由CSDN通过智能技术生成

Redux 的设计思想很简单，就两句话：

Web 应用是一个状态机，视图与状态是一一对应的。
所有的状态，保存在一个对象里面。
在组件化的应用中（比如react、vue2.0等），会有着大量的组件层级关系，深嵌套的组件与浅层父组件进行数据交互，变得十分繁琐困难。而redux，站在一个服务级别的角度，可以毫无阻碍地（这个得益于react的context机制，后面会讲解）将应用的状态传递到每一个层级的组件中。redux就相当于整个应用的管家。

redux有三大准则

1、单一数据源：
整个应用状态，都应该被存储在单一store的对象树中。
2、只读状态：
唯一可以修改状态的方式，就是发送（dispatch）一个动作（Action），通俗来讲，就是说只有getter，没有setter。
3、使用纯函数去修改状态

redux 的几个核心概念

（1）Action
Action是唯一可以改变状态的途径，服务器的各种推送、用户自己做的一些操作，最终都会转换成一个个的Action，而且这些Action会按顺序执行，这种简单化的方法用起来非常的方便。Action 是一个对象。其中的type属性是必须的，表示 Action 的名称：

const action = {
   
    type: 'home',
    msg: 'Write Document'
};

（2）Store
Store管理着整个应用的状态，Store提供了一个方法dispatch，这个就是用来发送一个动作，去修改Store里面的状态，然后可以通过getState方法来重新获得最新的状态，也就是state。
（3）Reducer
当dispatch之后，getState的状态发生了改变，Reducer就是用来修改状态的。Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

const reducer = function (state, action) {
   
  // ...
  return new_state;
};

知道这些基本概念，我们来手动封装一个redux试试。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button onclick="store.dispatch({type:'COUNT_DECREMENT',num:1})">-</button>
  <h1 id="count"></h1>
  <button onclick="store.dispatch({type:'COUNT_INCREMENT',num:1})">

最低0.47元/天解锁文章

海绵宝宝的微笑`

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【 React 】 React 中的公共状态管理 Redux ！

Redux 的设计思想很简单，就两句话：Web 应用是一个状态机，视图与状态是一一对应的。所有的状态，保存在一个对象里面。在组件化的应用中（比如react、vue2.0等），会有着大量的组件层级关系，深嵌套的组件与浅层父组件进行数据交互，变得十分繁琐困难。而redux，站在一个服务级别的角度，可以毫无阻碍地（这个得益于react的context机制，后面会讲解）将应用的状态传递到每一个层级的组件中。redux就相当于整个应用的管家。redux有三大准则1、单一数据源：整个应用状态，都应该被存储
复制链接

扫一扫

专栏目录