Redux - Redux在React函数式组件中的基本使用

这篇具有很好参考价值的文章主要介绍了Redux - Redux在React函数式组件中的基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Redux - Redux在React函数式组件中的基本使用,react.js,前端,前端框架

一,简介

Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。

它主要的几个方法如下:

Redux - Redux在React函数式组件中的基本使用,react.js,前端,前端框架
重要的有方法 有 dispatch(分发action)getState(获取state)subscribe(监听state的变化),下面会介绍到,另外两个可以不用管;


那什么时候使用Redux呢?

当遇到如下问题时,建议开始使用 Redux

  1. 你有很多数据随时间而变化
  2. 你希望状态有一个唯一确定的来源(single source of truth)
  3. 你发现将所有状态放在顶层组件中管理已不可维护

二,安装

我这里安装的是 "redux": "^4.2.1"版本;

npm install redux --save

项目的src目录下面新建store文件夹index.js,reducer.js;如下:

Redux - Redux在React函数式组件中的基本使用,react.js,前端,前端框架

三,三大核心概念Store、Action、Reducer

3.1 Store

Store:存储数据的地方。最好整个应用只有一个 Store。

createStore() :用来生成 Store。接收 Reducer 作为其参数。

index.js

/**
 * 引入createStore 专门创建最为核心的store对象
 * 目前createStore已经弃用,所以我们要引用legacy_createStore 
 */

iimport { legacy_createStore } from "redux";
import reducer from './reducer.ts'

// 创建数据仓库 引入reducer函数进行对数据的处理
const store = legacy_createStore(reducer)

export default store

3.2 Reducer

reduce的本质就是一个函数 ,作用是初始化状态和加工状态。

reduce函数里面接收两个参数,第一个参数是state的初始值,第二个参数是一个action对象,对象里的第一个属性是type也就是函数的名称,第二个属性就是传进来的值,用于后续更改state;

reducer.ts


// 约束类型
interface Eula {
  name: string;
  age: number;
}
// 定义数据
const defaultState: Eula = {
  name: "Eula",
  age: 18
};

// reducer 函数 用于更改数据
let reducer = (preState = defaultState, action: { type: string; data: number }) => {
  // action解构出来
  let { type, data } = action;

  // 第一种写法 每个分支使用return进行返回
  // switch (type) {
  //   case "update_age":
  //     preState.age = data;
  //     return preState;
  //   case "add_age":
  //     preState.age++;
  //     return preState;
  //   case "del_age":
  //     preState.age--;
  //     return preState;
  //   default:
  //     return preState; // 初始化时
  // }

  // 第二种写法 break 与最终的return返回结果
  switch (type) {
    case "update_age":
      preState.age = data;
      break;
    case "add_age":
      preState.age++;
      break;
    case "del_age":
      preState.age--;
      break;
    default:
      preState; // 初始化时
  }
  return preState;  // 此处 一定要使用return进行返回最终改变的值
};

export default reducer;

注意: 初次加载 Store 会自动调用一次 Reducer 进行初始化状态,此时 state 是 undefined,action 对象中的 type 为 @@redux/INITxxx。手动调用 store.dispatch() 也会触发 Reducer 的自动执行。

3.3 Action

Action 就是一个普通的 JS 对象,用于描述要更新的数据类型和内容,其中 type 属性是必须的,表示 Action 的名称,其他属性可以自由设置。

redux.tsx

// 引入store
import store from "../../../store/index";
// 更改数据时调用
store.dispatch({ type: "update_age", data: 100 });

store.dispatch():所有数据的变化,必须通过派发(dispatch) Action 来更新。接受一个 Action 对象作为参数,将其发送出去。

四,开始函数式组件中使用

redux.tsx

import React, { useState } from "react";
//  1,引入store
import store from "../../../store/index";

// 渲染数据
const myList:[] = [];

const Redux: React.FC = () => {
  let [list, setList] = useState(myList);
  console.log("store:", store);

  // 监听数据的变化
  const unsubscribe = store.subscribe(() => {
    console.log("订阅数据的变化", store.getState());
    // 此处用来触发视图的更新
    setList([]);
  });

  // 改变store中的数据
  const update = () => {
    store.dispatch({ type: "update_age", data: 100 });
  };
  const add = () => {
    store.dispatch({ type: "add_age" });
  };
  const del = () => {
    store.dispatch({ type: "del_age" });
  };

  // 此处才是真正渲染的页面
  return (
    <div className="redux">
      <h3>redux演示</h3>
      <button onClick={update}>更改store的数据+100</button>
      <button onClick={add}>更改store的数据++</button>
      <button onClick={del}>更改store的数据--</button>
      <p>store的num数据:{store.getState().age}</p>
    </div>
  );
};
export default Redux;

效果图:

Redux - Redux在React函数式组件中的基本使用,react.js,前端,前端框架

上面的组件是一个简单的案例演示,定义了三个点击事件,点击第一个按钮state.age+100,点击第二个按钮每次state.age+1,点击第三个按钮age每次减一;下面会详细介绍几个重点内容:

4.1,引入store

先引进来,这个没什么好说的;

import store from "../../../store/index";

4.1,store.getState()方法

getState()方法是redux实例下的方法之一,上面的第一张截图已经通过store实例打印出来了;

getState()的作用是获取当前状态下运行在redux中的state;也就是说获取store中最新的数据;

   <p>store的num数据:{store.getState().age}</p>

4.3,store.dispatch()方法

dispatch() 是唯一能够修改 state 数据的行为。通过分发action (其实就是一个对象),配合 dispatch 函数传入的 action 及其 payload 计算得到新的 state,并更新到闭包数据中,这样就实现了 state 的更新;

如下:
reducer.tsx

  // 改变store中的数据
  const update = () => {
    store.dispatch({ type: "update_age", data: 100 });
  };
  const add = () => {
    store.dispatch({ type: "add_age" });
  };
  const del = () => {
    store.dispatch({ type: "del_age" });
  };

上面的代码会和下面的 switch case 表达式所判断的type要一 一对应,用于更新state;

reducer.ts

let reducer = (preState = defaultState, action: { type: string; data: number }) => {
  let { type, data } = action;
  
  // 第一种写法 每个分支使用return进行返回
  // switch (type) {
  //   case "update_age":
  //     preState.age = data;
  //     return preState;
  //   case "add_age":
  //     preState.age++;
  //     return preState;
  //   case "del_age":
  //     preState.age--;
  //     return preState;
  //   default:
  //     return preState; // 初始化时
  // }

  // 第二种写法 break 与最终的return返回结果
  switch (type) {
    case "update_age":
      preState.age = data;
      break;
    case "add_age":
      preState.age++;
      break;
    case "del_age":
      preState.age--;
      break;
    default:
      preState; // 初始化时
  }
  return preState;  // 此处 一定要使用return进行返回最终改变的值
};

上面的两种写法是一样的;对比一下;

4.4,store.subscribe()方法

subscribe函数只要store中的state数据变化了,就会触发subscribe方法,相当注册了一个监听器;监听store中的数据变化;

从 react 层面来说,redux 的 store 是隔离开的,我们需要一个桥梁,使得数据层出现更新的同时更新UI层逻辑,这时 store 中的最后一个方法,subscribe 方法就派上用场了。

注意: setList([]):是为了主动触发react视图更新的方法,否则store中数据改变了,视图却没有重新渲染。

import React, { useState } from "react";
const Redux: React.FC = () => { 
  let [list, setList] = useState(myList);
// 监听数据的变化
  const unsubscribe = store.subscribe(() => {
    console.log("订阅数据的变化", store.getState());
    // 此处用来触发视图的更新
    setList([]);
  });
}

subscribe也同时返回了一个 unsubscribe 函数。当我们不在希望订阅这个监听器时,调用 unsubscribe(),对应的函数就会从监听器队列中被移除。

unsubscrib() // 不再监听

五,Redux 的三大原则

  1. 单一数据源:整个应用程序的 State 被存储在一棵 object tree 中,并且这棵 object tree 只存储在一个 Store 中。单一数据源可以让整个应用程序的 State 变得方便维护、修改、追踪。
  2. State 是只读的:唯一修改 State 的方法就是触发 Action,不要试图在其他地方通过任何的方式来修改State。这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行。
  3. 使用纯函数来执行修改:通过 Reducer 将旧的 State 和 Action 联系在一起,返回一个新的 State。所有的Reducer 都应该是纯函数,不能产生任何的副作用。

End:


[redux中文网]: https://cn.redux.js.org/文章来源地址https://www.toymoban.com/news/detail-639528.html

到了这里,关于Redux - Redux在React函数式组件中的基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(三十二)——Redux的三大原则、使用流程及实践

    单一数据源 整个应用程序的state被存储在一颗object tree 中,并且这个object tree 只存储在一个store中; Redux并没有强制让我们不能创建多个Store,但是那样做不利于数据维护; 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改; State是只读的 唯一修改State的方法

    2024年02月15日
    浏览(62)
  • react之react-redux的介绍、基本使用、获取状态、分发动作、数据流、reducer的分离与合并等

    官网地址 React 和 Redux 是两个独立的库,两者之间职责独立。因此,为了实现在 React 中使用 Redux 进行状态管理 ,就需要一种机制,将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了 作用:为 React 接入 Redux,实现在 React 中使用 Redux 进行状态管理。 react-r

    2024年02月11日
    浏览(53)
  • React中的组件的渲染函数(Render Function)是什么?什么是React中的函数组件和类组件?如何在React中进行状态管理?

    React中的组件可以有多种形式的渲染函数,包括传统的render()方法,以及近年来兴起的函数组件和Hooks中的useState()和useEffect()。在这篇文章中,我将详细介绍渲染函数,以及如何在React中使用它们。 渲染函数(Render Function)是指组件在生命周期中的一个特殊方法,它的作用是根据

    2024年02月13日
    浏览(41)
  • 前端react入门day02-React中的事件绑定与组件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React中的事件绑定 React 基础事件绑定 使用事件对象参数  传递自定义参数  同时传递事件对象和自定义参数  React中的组件  组件是什么 React组件 useState  修改状态的规

    2024年02月06日
    浏览(85)
  • React中的类组件和函数组件(详解)

           React 的核心思想就是组件化,相对于 Vue 来说, React 的组件化更加灵活和多样。主要可以分为两大类: 函数组件 , 类组件, 这两大类组件的名称 必须是大写字母开头      函数组件通常是 function 进行定义的函数,这个函数会返回和类组件中 render 函数返回一样

    2024年02月09日
    浏览(41)
  • 【前端】React快速入门+Redux状态管理

    本文旨在记录react的基础内容,帮助有需要的同学快速上手,需要进一步了解描述更加稳妥和全面的信息,请查阅官方文档 官方文档点击这里进行跳转 react框架 vue,react,angular这几种主流前端框架使用频率较高…本质还是js库。 React.js是一个用于构建用户界面的JavaScript库。它由

    2024年02月12日
    浏览(50)
  • 【前端知识】React 基础巩固(三十一)——Redux的简介

    概念 纯函数(确定的输入一定产生确定的输出,函数在执行过程中不产生副作用): 在程序设计中,若一个函数符合以下条件,那么这个函数就被称为纯函数 此函数在相同的输入值时,需产生相同的输出 函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产

    2024年02月16日
    浏览(53)
  • React和Redux中的不变性

    https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/ 一、不变性和副作用 1.不变:不断创造新值来替换旧值 2.不变性规则: (1)当给定相同的输入时,纯函数必须始终返回相同的值 (2)纯函数不能有任何副作用 3.副作用:修改直接函数范围之外的东西 改变/修改传入的参数(的

    2024年02月10日
    浏览(41)
  • React中使用Redux (二) - 通过react-redux库连接React和Redux

    react-redux库使用Redux 上一篇文章演示React中直接使用Redux的使用过程是十分繁琐的, 并且有许多重复代码 但是实际上redux官方帮助我们提供了 react-redux 的库,这个库是帮助我们完成连接redux和react的辅助工具, 可以直接在项目中使用,并且实现的逻辑会更加的严谨和高效 这篇我们

    2024年02月20日
    浏览(53)
  • React中的redux-saga详解

    redux-saga 是 redux 一个中间件,它是基于ES6 的 Generator 功能实现,用于解决异步问题(让redux中可以直接进行异步操作)。 组件会发送一个 action 对象给 redux-saga,redux-saga(主saga) 就会分析监听 saga 中有没有当前 action 对应的 type 类型操作,如果在监听 saga 中找到了,说明当前

    2024年02月04日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包