原生实现一个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 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 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
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP 文件上传全攻略
2010/04/28 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Python多进程fork()函数详解
2019/02/22 Python
python实现移位加密和解密
2019/03/22 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Python循环结构的应用场景详解
2019/07/11 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
申论倡议书范文
2014/05/13 职场文书
经济贸易系求职信
2014/08/04 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
付款证明模板
2015/06/19 职场文书
2015大学迎新标语
2015/07/16 职场文书