首页 > 其他分享 >react-redux 的使用(一)

react-redux 的使用(一)

时间:2024-01-25 17:02:29浏览次数:32  
标签:dispatch react add connect 使用 import redux

react-redux 的使用(一)

其实它的使用还是离不开 redux

它分为两部分,UI 组件和容器组件(注意,原有的store文件内容不改变,并且在APP.js渲染的是容器组件)

此时产生了一个大改变,就是在页面不再通过store获取数据,而是this.props.xxx

容器文件代码如下:

import {connect} from 'react-redux'
import HelloUI from '../../componenet/hello'
export default connect(state => ({
    number: state // 届时 props 属性上会多出一个 number 属性
}), dispatch => ({
    add: data => dispatch({ type: 'add', data }) // 届时 props 属性上会多出一个 add 方法
}))(HelloUI)

App.js文件代码如下

import Hello from "./container/hello";
import {store} from './store'

function App() {
  return (
    <div className="App">
        <Hello store={store} />
    </div>
  );
}

export default App;

在页面显示或调用方法用this.props.xxx就行

进阶

异步写法如下:

import {connect} from 'react-redux'
import HelloUI from '../../componenet/hello'
export default connect(state => ({
    number: state
}), dispatch => ({
    // 其实还和以前异步一样的写法,只不过挪到这里来了
    add: data => dispatch((dispatch, getState, extraArgument) => {
        setTimeout(() => {
            dispatch({ type: 'add', data})
        }, 2000)
    })
}))(HelloUI)

标签:dispatch,react,add,connect,使用,import,redux
From: https://www.cnblogs.com/zhumenglong/p/17987537

相关文章

  • Spring的事务使用教程
    什么是事务?事务(Transaction)是数据库操作最基本单元,逻辑上一组操作,要么都成功,要么都失败,如果操作之间有一个失败所有操作都失败。事务四个特性(ACID)原子性一组操作要么都成功,要么都失败。一致性一组数据从事务1合法状态转为事务2的另一种合法状态,就是一致。隔离性事务1......
  • Redux的使用(一)
    Redux的使用store文件如下import{createStore}from'redux'exportconststore=createStore((preState=0,{type,data})=>{switch(type){case'add':returnpreState+datacase'jian':......
  • JAVA学习笔记--使用Inte IDEA
    使用IntellijIDEA编写代码新建项目创建新项目选择创建一个空项目并输入项目名弹出ProjecStructure窗口先关闭新建一个模板(Module)并输入模板名打开前面关闭的ProjecStructure窗口修改以下信息(注意:安装的是JDK8则按照以下信息修改,若安装的是JDK其他版本则......
  • 源码文件阅读---hooks的使用---使用文心一言读代码
    import{CommonFormTypes}from'globalConstants';import{createContext,useCallback,useState}from'react';import{BoardType}from'../../../DashBoardPage/pages/Board/slice/types';import{VizType}from'./slic......
  • [转]vs2019升级后,启动调试,谷歌浏览器无法正常使用 - 温故纳新 - 博客园
    解决方法:vs2019按如下步骤设置:工具  =》 选项  =》调试 =》 常规 =》勾选“启用APS.NET 的 Javascript 调试(Chrome和IE)”---------------------作者:温故纳新来源:CNBLOGS原文:https://www.cnblogs.com/tomorrow0/p/14383870.html版权声明:本文为作者原创文章,转载请......
  • Postman使用总结
    对于黑盒测试工程师来说,使用postman的场景无非就是拿它看看接口返回的数据。比对一下预期返回的参数与实际是否相符。所以我这里的postman使用方法仅限于如何调用接口。 首先,你需要下载postman(毋庸置疑,其实用网页版也可以)官网主页:https://www.postman.com/downloads/安装你......
  • 【技术探讨】用户使用其他厂家433MHz无线模块时,购买样品OK,小批量100个就会出现偶尔无
        许多用户使用其他厂家的433M透传无线模块反馈这样的问题:前期购买几个样品测试,在无线信号覆盖半径内,收发包测试都很稳定,但是小批量购买100个模块收发就会出现无法收发的情况。这是什么原因呢?    首先科普一下,无线电波,在同一个信道同一时刻只允许一个节点发射行......
  • de4dot 使用
    1#直接解混淆,一般效果还行,结果文件命名为"file1-cleaned"2de4dot.exefile13#可以一次处理多个文件4de4dot.exefile1file2file35#递归搜索.NET文件,处理后输出到output文件夹,-r表示recursively6de4dot.exe-rc:\my\files-roc:\my\output7#-f指定输......
  • jclasslib 插件安装及使用
    原文地址blog.csdn.net学习Java,必须要了解JVM,而学习JVM知识时,总要去研究一些字节码指令而jclasslib这个插件很好的解决了这个问题jclasslib安装:1.打开设置或者按Ctrl+Alt+S,打开设置2.找到jclasslib插件点击install下载安装即可3.安装完重启,然后点击视图:......
  • 前端工程化解决方案webpack使用小结
    前端工程化解决方案webpack,模块化、组件化、规范化、自动化,使得前端开发更加高效。功能:代码压缩混淆、处理浏览器端js的兼容性、以模块化的方式处理项目中的资源webpack插件:clean-webpack-plugin清除dist文件夹之前打包生成的文件使用步骤:先安装 再在webpac......