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


Posted in Javascript onJune 08, 2018

自己动手实现一个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)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
vue项目中使用百度地图的方法
Jun 08 #Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 #Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 #Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 #Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 #Javascript
vue cli2.0单页面title修改方法
Jun 07 #Javascript
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
mysq GBKl乱码
2006/11/28 PHP
PHP反射学习入门示例
2019/06/14 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
javascript 常用功能总结
2012/03/18 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python实现矩阵乘法的方法
2015/06/28 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python去除文件中重复的行实例
2018/06/29 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python多任务之协程的使用详解
2019/08/26 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
你常见到的runtime exception
2016/09/05 面试题
售后服务承诺书范文
2014/03/26 职场文书
国庆节标语大全
2014/10/08 职场文书