专栏首页小丞前端库React 入门学习(十五)-- React-Redux 基本使用

React 入门学习(十五)-- React-Redux 基本使用

📢 大家好,我是小丞同学,一名大二的前端爱好者 📢 这篇文章是学习 React-Redux 的学习笔记 📢 非常感谢你的阅读,不对的地方欢迎指正 🙏 📢 愿你忠于自己,热爱生活

引言

在前面我们学习了 Redux ,我们在写案例的时候,也发现了它存在着一些问题,例如组件无法状态无法公用,每一个状态组件都需要通过订阅来监视,状态更新会影响到全部组件更新,面对着这些问题,React 官方在 redux 基础上提出了 React-Redux 库

在前面的案例中,我们如果把 store 直接写在了 React 应用的顶层 props 中,各个子组件,就能访问到顶层 props

<顶层组件 store={store}>
  <App />
</顶层组件/>

这就类似于 React-Redux

容器组件和 UI 组件

  1. 所有的 UI 组件都需要有一个容器组件包裹
  2. 容器组件来负责和 Redux 打交道,可以随意使用 Redux 的API
  3. UI 组件无任何 Redux API
  4. 容器组件用于处理逻辑,UI 组件只会负责渲染和交互,不处理逻辑

在我们的生产当中,我们可以直接将 UI 组件写在容器组件的代码文件当中,这样就无需多个文件

首先,我们在 src 目录下,创建一个 containers 文件夹,用于存放各种容器组件,在该文件夹内创建 Count 文件夹,即表示即将创建 Count 容器组件,再创建 index.jsx 编写代码

要实现容器组件和 UI 组件的连接,我们需要通过 connect 来实现

// 引入UI组件
import CountUI from '../../components/Count'
// 引入 connect 连接UI组件
import {connect} from 'react-redux'
// 建立连接
export default connect()(CountUI)

后面还会详细讲到

Provider

由于我们的状态可能会被很多组件使用,所以 React-Redux 给我们提供了一个 Provider 组件,可以全局注入 redux 中的 store ,只需要把 Provider 注册在根部组件即可

例如,当以下组件都需要使用 store 时,我们需要这么做,但是这样徒增了工作量,很不便利

<Count store={store}/>
{/* 示例 */}
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>
<Demo1 store={store}/>

我们可以这么做:在 src 目录下的 index.js 文件中,引入 Provider ,直接用 Provider 标签包裹 App 组件,将 store 写在 Provider 中即可

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

这样我们在 App.jsx 文件中,组件无需手写指定 store ,即可使用 store

connect

在前面我们看到的 react-redux 原理图时,我们会发现容器组件需要给 UI 组件传递状态和方法,并且是通过 props 来传递,看起来很简单。但是,我们会发现容器组件中似乎没有我们平常传递 props 的情形

这时候就需要继续研究一下容器组件中的唯一一个函数 connect

connect 方法是一个连接器,用于连接容器组件和 UI 组件,它第一次执行时,接收4个参数,这些参数都是可选的,它执行的执行的结果还是一个函数,第二次执行接收一个 UI 组件

第一次执行时的四个参数:mapStateToPropsmapDispatchToPropsmergePropsoptions

mapStateToProps

const mapStateToProps = state => ({ count: state })

它接收 state 作为参数,并且返回一个对象,这个对象标识着 UI 组件的同名参数,

返回的对象中的 key 就作为传递给 UI 组件 props 的 key,value 就作为 props 的 value

如上面的代码,我们可以在 UI 组件中直接通过 props 来读取 count

<h1>当前求和为:{this.props.count}</h1>

这样我们就打通了 UI 组件和容器组件间的状态传递,那如何传递方法呢?

mapDispatchToProps

connect 接受的第二个参数是 mapDispatchToProps 它是用于建立 UI 组件的参数到 store.dispacth 方法的映射

我们可以把参数写成对象形式,在这里面定义 action 执行的方法,例如 jia 执行什么函数,jian 执行什么函数?

我们都可以在这个参数中定义,如下定义了几个方法对应的操作函数

{
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction
}

写到这里其实 connect 已经比较完善了,但是你可以仔细想想 redux 的工作流程

似乎少了点什么,我们在这里调用了函数,创建了 action 对象,但是好像 store 并没有执行 dispatch ,那是不是断了呢?执行不了呢?

其实这里 react-redux 已经帮我们做了优化,当调用 actionCreator 的时候,会立即发送 actionstore 而不用手动的 dispatch

  • 自动调用 dispatch

完整开发

首先我们在 containers 文件夹中,直接编写我们的容器组件,无需编写 UI 组件

先打 rcc 打出指定代码段,然后暴露出 connect 方法

import { connect } from 'react-redux'

action 文件中暴露创建 action 的方法

import {createIncrementAction} from '../../redux/count_action'

编写 UI 组件,简单写个 demo,绑定 props 和方法

return (    <div>        <h2>当前求和为:{this.props.count}</h2>        <button onClick={this.add}>点我加1</button>    </div>);

调用 connect 包装暴露 UI 组件

export default connect(    state => ({ count: state }),// 状态    { jia: createIncrementAction } // 方法)(Count);

第一次执行的参数就直接传递 state 和一个指定 action 的对象


非常感谢您的阅读,欢迎提出你的意见,有什么问题欢迎指出,谢谢!🎈

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React 入门学习(十四)-- redux 基本使用

    在了解了 Antd 组件库之后,我们现在开始学习了 Redux ,在我们之前写的案例当中,例如:todolist 案例,GitHub 搜索案例当中,我们对于状态...

    小丞同学
  • 前端资源分享-只为更好前端

    阅读更多 本文在GitHub的地址GitHub Front-end-resources

    WEBING
  • 前端资源分享——只为更好前端

    一、团队组织 网站说明腾讯 AlloyTeam 团队腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究ISUX腾讯社交用户体验设计,简称ISUX,腾...

    wangxl
  • React与Redux开发实例精解

    3.Redux是一个JavaScript状态容器,提供可预测的状态管理,三条基本原则:

    硬核项目经理
  • react hooks+redux+immutable.js仿网易云音乐打造精美webApp

    github地址:https://github.com/sanyuan0704/cloud-music(进去有在线体验入口哦)

    用户3806669
  • 前端资源、交流社区、技术博客等整理总汇

    最近看到这篇前端资源总汇的文章,整理的非常详细,于是搬过来,方便自己后期查阅,侵删。

    德顺
  • 2021年React学习路线图

    2018 年我们写过一次 React 学习路线图(https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc),两年过去...

    深度学习与Python
  • 超性感的React Hooks(一):为何她独具魅力

    过去大半年里,我将React Hooks应用到了许多大型项目,其中5个全新重构,其他项目由于时间关系少量使用。

    用户6901603
  • 使用 React Hooks 代替 Redux

    React Hooks 面世也有很大一段时间了。我相信很多人对于 Hooks 的认知还大概处在:

    Nealyang
  • 「首席架构师推荐」React生态系统大集合

    首席架构师智库
  • 【实战】1096- React 中后台系统多页签实现

    本项目是我现在所在部门的项目,是一个企业级中后台管理系统,包括系统管理、角色权限体系、基于 Activiti 的工作流引擎等很多开箱即用的功能。项目包括前后端,...

    pingan8787
  • react-native-android之初次相识

    作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒。 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开...

    xiangzhihong
  • 一份传男也传女的 React Native 学习笔记

    这段时间了解了一些前端方面的知识,并且用 React Native 写了一个简易新闻客户端 Demo。

    网罗开发
  • TypeScript 、React、 Redux和Ant-Design的最佳实践

    Peter谭金杰
  • React入门心得及使用tips

    React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开始学习Re...

    IMWeb前端团队
  • React入门心得及使用tips

    1 前言 React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开...

    IMWeb前端团队
  • React进阶(2)-上手实践Redux-如何获取store的数据

    在前面的一文理解Redux中,已经知道了Redux的工作流程以及Redux的设计基本原则,它就是一个用于管理组件的公共数据状态的数据层框架,包括了Store,R...

    itclanCoder
  • 【小狮子前端】「Redux」概念理解+实战上手(内含大量实例)

    这篇文章零基础也可以看,我尽量写得简单易懂了,如果觉得理解起来有点费力,也可以先去官网入门。

    一百个Chocolate
  • 谈谈 React 5种最流行的状态管理库

    原文:sourl.cn/F95CrZ,代码仓库地址: https://github.com/dabit3/react-state-5-ways

    秋风的笔记

扫码关注云+社区

领取腾讯云代金券