原生实现一个react-redux的代码示例

2024-12-16 23:20:43

自己动手实现一个react-redux

之前试过自己动手实现一个redux，这篇blog主要记录动手实现一个react-redux的过程。

这个react-redux还有一点点小瑕疵，我以一个计数器作为例子来实现的。

这是目录结构:

这里的connect.js文件就是react-redux。

├─component
│   connect.js
│   counter.js
│
└─store
    index.js

index.js：

import React from "react";
import ReactDom,{render} from "react-dom";
import Couter from "./component/counter";
import {Provider} from "./component/connect" import store from "./store/index"  ReactDom.render(<Provider store={store}><Couter/></Provider>,document.getElementById("root"));

./store/index.js:

import {createStore} from "redux";
function reducer(state={number:0},action) {
  switch (action.type){
    case "add":
      return {number:state.number+action.count}
    default:
      return state;
  }
}

export default createStore(reducer);

./component/connect.js:

import React from "react";
import PropTypes from "prop-types";
//Provider是一个组件 接受一个store属性 将其内容挂载在上下文context //这样后代才可以都有办法拿到 class Provider extends React.Component{

  static childContextTypes={
    //设置上下文的类型是对象
 store:PropTypes.object
 }

  getChildContext(){
    //获取并设置后代上下文的内容
 return {store:this.props.store}
  }
  render(){
    return this.props.children
 }
}

let connect=(mapStateToProps,mapDispatchToProps)=>(comp)=>{
  return class Proxy extends React.Component{
    static contextTypes={
      store:PropTypes.object
 }
    constructor(props,context){
      super(props);
      //将参数mapStateToProps 的解构赋值 代理组件的状态
 this.setState=mapStateToProps(context.store.getState())
    }
    componentDidMount(){
      this.context.store.subscribe(()=>{
        this.setState(mapStateToProps(this.context.store.getState()))
      })
    }
    render(){
      return <comp {...this.state} {...mapDispatchToProps(this.context.store.dispatch)}/>
    }
  }
}

export {Provider,connect}

./component/counter.js:

import React from "react";
import {connect} from "./connect";
export default class Counter extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return (
      <div>
        <button onClick={()=>{
          this.props.add(5);
        }}>+</button>
        {this.props.n}
      </div>
    )
  }
}

let mapStateToProps=(state)=>{
  return {n:state.number}
};
let mapDispatchToProps=(dispatch)=>{
  return {
    add:(count)=>{
      dispatch({type:"add",count:count})
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Counter)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

react-redux中connect()方法详细解析

组件 React-Redux将所有组件分为两大类:展示组件(UI组件),容器组件展示组件有以下几个特征: 只负责 UI 的呈现,不带有任何业务逻辑没有状态(即不使用this.state这个变量) 所有数据都由参数(this.props)提供不使用任何 Redux 的 API 容器组件有以下几个特征: 负责管理数据和业务逻辑,不负责 UI 的呈现带有内部状态使用 Redux 的 API 总结为一点: 展示组件负责 UI 的呈现,容器组件负责管理数据和逻辑 connect方法解析下图是c
react-redux中connect的装饰器用法@connect详解

最近在琢磨react中的一些小技巧,这篇文章记录一下在redux中用装饰器来写connect. 通常我们需要一个reducer和一个action,然后使用connect来包裹你的Component.假设你已经有一个key为main的reducer和一个action.js. 我们的App.js一般都这么写: import React from 'react' import {render} from 'react-dom' import {connect} from 'react-redux' i
详解react、redux、react-redux之间的关系

本文介绍了react.redux.react-redux之间的关系,分享给大家,也给自己留个笔记,具体如下: React 一些小型项目,只使用 React 完全够用了,数据管理使用props.state即可,那什么时候需要引入Redux呢? 当渲染一个组件的数据是通过props从父组件中获取时,通常情况下是 A --> B,但随着业务复杂度的增加,有可能是这样的:A --> B --> C --> D --> E,E需要的数据需要从A那里通过props传递过来,以及对应的 E
浅谈React和Redux的连接react-redux

之前一直在探索React相关的东西,手上有个SPA项目,于是准备上Redux试试水.Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理.要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react-redux,这两个库就不弄一起用了,而是说react-redux提供了一些封装,一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux. 之前仅通过
详解关于react-redux中的connect用法介绍及原理解析

关于react-redux的一个流程图流程图 connect用法介绍 connect方法声明: connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用:连接React组件与 Redux store. 参数说明: mapStateToProps(state, ownProps) : stateProps 这个函数允许我们将 store 中的数据作为 props 绑定到组件上. const mapSta
详解react-redux插件入门

可先查看我的redux简单入门 react-redux简介 react-redux是使用redux开发react时使用的一个插件,另外插一句,redux不是react的产品,vue和angular中也可以使用redux:下面简单讲解,如何使用react-redux来开发react. 描述这个插件可以让我们的redux代码更加的简洁和美观.我假设你已经有一个使用create-react-app创建的一个可以显示hello world的react环境,并且已经安装来redux. 注意:如果是刚使用
React Redux应用示例详解

目录一 React-Redux的应用 1.学习文档 2.Redux的需求 3.什么是Redux 4.什么情况下需要使用redux 二.最新React-Redux 的流程安装Redux Toolkit 创建一个 React Redux 应用基础示例 Redux Toolkit 示例三.使用教程安装Redux Toolkit和React-Redux 创建 Redux Store 为React提供Redux Store 创建Redux State Slice 将Slice Reduc
利用React高阶组件实现一个面包屑导航的示例

什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁,比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的. 使用 React 高阶组件的好处在工作中,我们经常会有很多功能相似,组件代码重复的页面需求,通常我们可以通过完全复制一遍代码的方式实现功能,但是这
jQuery函数的等价原生函数代码示例

我们针对常用的jQuery方法以及其等价原生方法的性能做了一些测试(1, 2, 3). 我知道你在想什么.原生方法明显要比jQuery方法快,因为jQuery方法要处理浏览器兼容以及其他一些事情.是的,我完全赞成.写这篇文章并不是出于反对使用jQuery,但如果你针对的是现代浏览器,那么使用原生方法会使性能有很大的提升. 许多开发者没有意识到大多数他们使用的jQuery方法可以使用原生方法,或者更轻量级的方法来代替.下面是一些代码示例,展示一些常用的jQuery方法,以及其等价原生方法. 译者注
javascript原生封装一个淡入淡出效果的函数测试实例代码

说到js的渐变显示与消失,多数朋友会想到JQuery里面的fadeIn().fadeOut()或fadeToggle().但如果仅仅是为了引入这样的一个效果,而去调用了庞大JQuery库?或者说我通过用原生js实现一些函数来提高自己~ 所以,我简单的研究了一下纯js代码写淡入淡出的效果. 如果出现错误,请在评论中指出,我也好自己纠正自己的错误 (一)FadeIn淡入函数淡入淡出的效果,其实就是一个setInterval(),加上循环的DOM操作,通过改变element对象节点的透明度,即可实现
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
原生JavaScript实现滑动拖动验证的示例代码

本文介绍了原生JavaScript实现滑动拖动验证的示例代码,分享给大家,具体如下: 通常,我们为了防止用户恶意提交表单,会让用户在提交前完成滑动拖动验证,有时候这也能起到一丝反爬的作用. 实现滑动验证的方式当然不止一种,这里我们直接使用原生 JavaScript 来实现. 现在,你可以在这里看到完整的源码. 原生实现原生 JavaScript 的实现,主要是通过监听鼠标事件来对 DOM 进行一系列的操作. 滑块验证的结构主要分为四个部分:轨道.滑块.背景和文案,我们可以使用下面的 HTML
原生JS封装拖动验证滑块的实现代码示例

前言星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库. 最终效果分析看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件的dom元素和完成的回调事件. 最终如何使用? 我们先来看下使用方式,再来决定我们怎么编写这个库具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esM
React实现一个通用骨架屏组件示例

目录骨架屏是什么? Demo 设计思路具体实现骨架屏是什么? 找到这里的同志,或多或少都对骨架屏有所了解,请容许我先啰嗦一句.骨架屏(Skeleton Screen)是一种优化用户弱网体验的方案,可以有效缓解用户等待的焦躁情绪. Demo 先看个demo 大概了解下最终的产物及其使用方式 npm install obiusm-react-components import { Skeleton } from 'obiusm-react-components'; <Skeleton isVi
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
switch实现一个两数的运算代码示例

具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

原生实现一个react-redux的代码示例

相关推荐

随机推荐