react-redux的基本使用

目录
  • react-redux和redux的关系？
  • react-redux基本使用
    • 1.安装
    • 2.配置
    • 3.组件中使用

react-redux和redux的关系？

redux是react中进行状态管理的js库（不是react插件），一般是管理多个组件中共享数据状态，和vue中的vuex是一样的

react-redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，说白了就是用于连接redux，它提供了connect和Provider两个Api

react-redux基本使用

1.安装

npm i react-redux@7 --save

尽量安装8.0以下的版本，8.0以上会报错，无法使用connect方法，提示hooks错误，provider也无法使用

2.配置

首先，我们在入口文件中配置react-redux的Provider方法，绑定store的redux对象数据

//导入react-redux的provier的组件
import { Provider } from "react-redux"
//...other
root.render(
  <Provider store={store}>
      <Routes />
  </Provider>
);

注意：Provider的store参数必须写，如果不写，他会报错，他的原理跟我们使用context状态树中给provider传递的value值一样

3.组件中使用

在我们要使用的组件中尝试连接react-redux连接redux的数据

使用步骤

  • 导入react-redux依赖包，引入connect方法
  • connect有两个函数参数，mapStateToProps和mapDispatchToProps
  • 把redux中state数据和action方法直接映射到组件props属性中去
  • 组件中可以直接通过props使用redux中的数据，调用方法直接调用redux中的action的数据
  • connect（ mapStateToProps，mapDispatchToProps）(组件名)

代码展示

import React from 'react';
import { connect } from 'react-redux';

export default function ReactRedux(props) {
    console.log(props);
  return (
    <div>
        <h3>react-redux</h3>
    </div>
  )
}
/把redux中的state数据映射到组件内部的变量
const mapStateToProps=(state)=>{
    console.log(state);
    return {
        ...state
    }
}
//把redux中action的操作，可以映射成为组件的props的内部函数
const mapDispathToProps=(dispatch)=>{
     return {
        plus:()=>dispatch({type:'PLUS'})
     }
}
//连接redux的操作的方法
ReactRedux=connect(mapStateToProps,mapDispathToProps)(ReactRedux)

connect方法执行完成以后绑定当前组件，复制完直接抛出即可

我们打印props中的数据会发现我们store中数据会作为props中属性给我们打印出来

这样，我们就可以使用props.属性/方法进行使用

到此这篇关于react-redux使用的文章就介绍到这了,更多相关react-redux使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React 中使用 Redux 的 4 种写法小结

    React 中使用 Redux 的 4 种写法小结

    目录 不使用 Redux 的写法 最底层的写法 React-Redux React-Redux 配合 connect 高阶组件 React-Rudex 配合 React Hooks Redux Toolkit 总结 Redux 是一种状态容器 JS 库,提供可预测的状态管理,经常和 React 配合来管理应用的全局状态,进行响应式组件更新. Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态.对于这种情况,如果通过 props 层层传递,代码会

  • 详解React 和 Redux的关系

    详解React 和 Redux的关系

    目录 一.redux和react的关系 二.react多组件共享 三.redux的三个核心概念 1.store 2.action (动作) 3.reducer (纯函数) 总结 文档: Redux中文文档 Redux 官方文档对 Redux 的定义是:一个可预测的 JavaScript 应用状态管理容器. 一.redux和react的关系 Redux并不只为react应用提供状态管理, 它还支持其它的框架. React 是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案.因

  • React Redux使用配置详解

    React Redux使用配置详解

    目录 前言 redux三大原则 redux执行流程 redux具体使用 执行流程 redux使用流程 前言 在使用redux之前,首先了解一下redux到底是什么? 用过vue的肯定知道vuex,vuex是vue中全局状态管理工具,主要是用于解决各个组件和页面之间数据共享问题,对数据采用集中式管理,而且可以通过插件实现数据持久化 redux跟vuex类似,最主要的就是用作状态的管理,redux用一个单独的常量状态state来保存整个应用的状态,可以把它想象成数据库,用来保存项目应用中的公共数据

  • react18中react-redux状态管理的实现

    react的状态管理还是挺多的现在流行的有以下五种: Recoil MobX XState Redux Context 今天我们来讲一下react众多状态管理之一的redux,虽然这个我不太喜欢用,但是我觉得简单的状态管理谁都会,但是难的就是程序员的分水岭,所以今天来给大家讲一下redux. 下面我们来讲讲redux的优点: 可以在众多组件中传值,突破react单向数据流的限制 不仅支持react还支持vue等主流框架 当然是好用方便啦 接下来我们讲一下啥时候去使用他 在我们有好多组件,但是组件

  • react redux中如何获取store数据并将数据渲染出来

    react redux中如何获取store数据并将数据渲染出来

    目录 前景提要 1.创建仓库骨架并书写初始代码 2.正式开始 3.store 数据获取方法(可略过) 4.数据的获取与展示 前景提要 如果不了解基础的话 ----- 点击此处 本文着重实现效果,不会讲太多原理问题 未使用 react-redux 管理工具 1.创建仓库骨架并书写初始代码 src 目录下创建 //store/index.js 代码 import { createStore } from 'redux'; import reducer from "./reducer" co

  • react redux及redux持久化示例详解

    react redux及redux持久化示例详解

    目录 一.react-redux 二.redux持久化 一.react-redux react-redux依赖于redux工作. 运行安装命令:npm i react-redux: 使用: 将Provider套在入口组件处,并且将自己的store传进去: import FilmRouter from './FilmRouter/index' import {Provider} from 'react-redux' import store from './FilmRouter/views/red

  • react.js框架Redux基础案例详解

    react.js框架Redux基础案例详解

    react.js框架Redux https://github.com/reactjs/redux 安装: npm install redux react-redux #基于react,我们在前面已经安装过了 Redux参考文档: http://redux.js.org/ Redux核心概念:Store 我们可以简单的理解为就是用来存储 各个组件的State或你自己定义的独立的state,对state进行统一读取.更新.监听等操作. http://redux.js.org/docs/basics/

  • react redux的原理以及基础使用讲解

    react redux的原理以及基础使用讲解

    目录 介绍 为什么会使用 redux? 什么时候该使用 redux? redux使用场景 redux 作用 工作流程 使用 1.下载 2.创建仓库store骨架 3.生成仓库 4.参数函数的创建 reducer 5.引入reducer来辅助store的创建 介绍 为什么会使用 redux? vue 是一个 MVVM层,可以实现 双向数据绑定,而 react 只能算一个 view 层,状态改变了只有去调用setState({xxx}) 才能去修改视图,当我们数据很复杂的时候可能需要用到 redux

  • React与Redux之数组处理讲解

    本文将介绍一些常用的数组处理函数和语法,如reduce().filter().map().every().some().展开运算符.这些知识和React与Redux本身没有直接关系,但是本章的示例中包含了这些函数和语法的用法,我们正好可以在程序中学习它们.另外值得一提的是,reduce().filter().map()等函数的思想来自函数式编程,感谢JavaScript是一门函数式编程语言,让原本复杂的逻辑处理变得如此简单. reduce() 概述 reduce()方法接收一个函数作为累加器(a

  • React/Redux应用使用Async/Await的方法

    Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Promise ,最终会进化为 Async/Await .虽然这个特性尚未正式发布,但是利用babel polyfill我们已经可以在应用中使用它了. 现在假设一个简单的React/Redux应用,我将引入 Async/Await 到其代码. Actions 此例子中有一个创建新文章的 Action ,传统方法是利用 Prom

  • 简单介绍react redux的中间件的使用

    用过react的同学都知道在redux的存在,redux就是一种前端用来存储数据的仓库,并对改仓库进行增删改查操作的一种框架,它不仅仅适用于react,也使用于其他前端框架.研究过redux源码的人都觉得该源码很精妙,而本博文就针对redux中对中间件的处理进行介绍. 在讲redux中间件之前,先用两张图来大致介绍一下redux的基本原理: 图中就是redux的基本流程,这里就不细说. 一般在react中不仅仅利用redux,还利用到react-redux: react-redux这里也不细说.

  • react redux入门示例

    环境准备 为了方便,这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置 如果需要自定义react的配置,需要运行下面的命令把配置文件弹出来. npm run eject 安装redux npm i redux --save 简单理解 redux简单用法就是通过它的store来订阅和发布信息. 通过subscribe来订阅action,通过dispatch来触发action.reducer中定义来各个action要做的事情. dem

  • 基于React+Redux的SSR实现方法

    基于React+Redux的SSR实现方法

    为什么要实现服务端渲染(SSR) 总结下来有以下几点: SEO,让搜索引擎更容易读取页面内容 首屏渲染速度更快(重点),无需等待js文件下载执行的过程 代码同构,服务端和客户端可以共享某些代码 今天我们将构建一个使用 Redux 的简单的 React 应用程序,实现服务端渲染(SSR).该示例包括异步数据抓取,这使得任务变得更有趣. 如果您想使用本文中讨论的代码,请查看GitHub: answer518/react-redux-ssr 安装环境 在开始编写应用之前,需要我们先把环境编译/打包环境

  • react+redux仿微信聊天界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室--reactChatRoom,实现了聊天记录下拉刷新.发送消息.表情(动图),图片.视频预览,打赏.红包等功能. 二.技术栈MVVM框架: react / react-dom状态管理:redux / react-redux页面路由:react-router-dom弹窗插件

  • 使用react+redux实现计数器功能及遇到问题

    使用react+redux实现计数器功能及遇到问题

    Redux,本身就是一个单纯的状态管理者,我们不追溯它的历史,从使用角度来说:它提供一个全局的对象store,store中包含state对象用以包含所有应用数据,并且store提供了一些reducer方法.这些方法可以自定义,使用调用者得以改变state的值.state的值仅为只读,如果需要更改则必须只能通过reducer. Redux 核心对象:store 数据存储:state 状态更新提交接口:==dispatch== 状态更新提交参数:带type和payload的==Action== 状态

  • 使用react+redux实现弹出框案例

    本文实例为大家分享了用react+redux实现弹出框案例的具体代码,供大家参考,具体内容如下 redux 实现弹出框案例 1.实现效果,点击显示按钮出现弹出框,点击关闭按钮隐藏弹出框 新建弹出框组件 src/components/Modal.js, 在index.js中引入app组件,在app中去显示计数器和弹出框组件 function Modal ({ showState, show, hide }) {     const styles = {         width: 200,  

  • 一文详解React Redux使用方法

    一文详解React Redux使用方法

    目录 一.理解JavaScript纯函数 1.1 纯函数的概念 1.2 副作用概念的理解 1.3 纯函数在函数式编程的重要性 二.Redux的核心思想 2.1 为什么需要 Redux 2.2 Redux的核心概念 2.2.1 store 2.2.2 action 2.2.3 reducer 2.3 Redux的三大原则 2.3.1 单一数据源 2.3.2 State是只读的 2.3.3 使用纯函数来执行修改 2.4 Redux 工作流程 三.Redux基本使用 3.1 创建Store的过程 3.

随机推荐