Provider

// Provider把store放到context里,所有的子元素可以直接取到store
import React from 'react'
import PropTypes from 'prop-types'
import {bindActionCreators} from './utils.js' export const connect = (mapStateToProps=state=>state,mapDispatchToProps={})=>(WrapComponent)=>{
return class ConnectComponent extends React.Component{
static contextTypes = {
store:PropTypes.object
}
constructor(props, context){
super(props, context)
this.state = {
props:{}
}
}
componentDidMount(){
const {store} = this.context
store.subscribe(()=>this.update())
this.update()
}
update(){
const {store} = this.context
const stateProps = mapStateToProps(store.getState())
const dispatchProps = bindActionCreators(mapDispatchToProps, store.dispatch)
this.setState({
props:{
...this.state.props,
...stateProps,
...dispatchProps
}
})
}
render(){
return <WrapComponent {...this.state.props}></WrapComponent>
}
}
} export class Provider extends React.Component{
static childContextTypes = {
store: PropTypes.object
}
getChildContext(){
return {store:this.store}
}
constructor(props, context){
super(props, context)
this.store = props.store
}
render(){
return this.props.children
}
}

utils.js

export function createStore(reducer, enhancer){
if (enhancer) {
return enhancer(createStore)(reducer)
}
let currentState = {}
let currentListeners = [] function getState(){
return currentState
}
function subscribe(listener){
currentListeners.push(listener)
}
function dispatch(action){
currentState = reducer(currentState, action)
currentListeners.forEach(v=>v())
return action
}
dispatch({type:'@IMOOC/WONIU-REDUX'})
return { getState, subscribe, dispatch}
} // 自定义applyMiddleware函数
export function applyMiddleware(...middlewares){
return createStore=>(...args)=>{
const store = createStore(...args)
let dispatch = store.dispatch const midApi = {
getState:store.getState,
dispatch:(...args)=>dispatch(...args)
}
const middlewareChain = middlewares.map(middleware=>middleware(midApi))
dispatch = compose(...middlewareChain)(store.dispatch)
return {
...store,
dispatch
} }
}
// 自定义compose函数
export function compose(...funcs){
if (funcs.length==0) {
return arg=>arg
}
if (funcs.length==1) {
return funcs[0]
}
return funcs.reduce((ret,item)=> (...args)=>ret(item(...args)))
}
function bindActionCreator(creator, dispatch){
return (...args) => dispatch(creator(...args))
}
export function bindActionCreators(creators,dispatch){
return Object.keys(creators).reduce((ret,item)=>{
ret[item] = bindActionCreator(creators[item],dispatch)
return ret
},{})
}

react之自定义react-redux的provider、connect的更多相关文章

  1. react之自定义迷你redux的实现

    export function createStore(reducer){ let currentState={} let currentListeners=[] function getState( ...

  2. React深入 - 手写redux api

    简介: 手写实现redux基础api createStore( )和store相关方法 api回顾: createStore(reducer, [preloadedState], enhancer) ...

  3. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  4. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  5. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  6. 前端笔记之React(五)Redux深入浅出

    一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...

  7. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  8. react,react-router,redux+react-redux 构建一个React Demo

    创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...

  9. react第十七单元(redux和组件之间的通信,react-redux的相关api的用法)

    第十七单元(redux和组件之间的通信,react-redux的相关api的用法) #课程目标 什么是redux-redux react-redux的作用是什么 react-redux如何应用 #知识 ...

  10. react中的hoc和修饰器@connect结合使用

    在学习react-redux的时候,看到了修饰器这个新的属性,这个是es7的提案属性,很方便.于是我用@connect代替了connect(使用的时候需要配置,这里不赘述),省去了很多不必要的代码,但 ...

随机推荐

  1. Optional与Mybatis能否一起

    1.mybatis的@Param()参数传递的问题,与JDK1.8的Optional的返回值问题.使用Optional与spring-data-jpa和mybatis有啥区别? 使用spring-da ...

  2. Qt Designer 的使用

    1. Qt Designer 快速入门 Qt Designer 是交互式可视化GUI设计工具,可以帮助我们快速开发 PyQt 程序的速度. 它生成的 UI 界面是一个后缀为 .ui 的文件,可以通过 ...

  3. js对象之window和document区别

    window是整个页面的全局环境,而document可以理解为整个页面这个最大的元素(整个dom树) window: 可以看到window下面有很多变量 document: 可见document是整个 ...

  4. Hbase记录-HBase扫描/计数/权限

    HBase扫描   scan 命令用于查看HTable数据.使用 scan 命令可以得到表中的数据.它的语法如下: scan ‘<table name>’ 下面的示例演示了如何使用scan ...

  5. java.net.URL 模拟用户登录网页并维持session【转】

    java.net.URL 模拟用户登录网页并维持session 半成品,并非完全有用 import java.io.BufferedReader; import java.io.InputStream ...

  6. Debian/Ubuntu 下网易云音乐无法由图标/列表 打开的解决方案

    前言 本文为使用图标或快捷方式直接打开网易云音乐的一个从安装说起的到解决问题的简单教程 环境 debian 9.5 理论上使用apt包管理器的发行版均支持 源使用国内的源即可,无需特殊指定 安装网易云 ...

  7. android 简单的读写联系人

    一.读取联系人 (1).从raw_contact表读 contact_id (2).从data表中读取data1 (3).从mimetypes读取mimetype 1.AndroidManifest. ...

  8. QWidget窗口类

    import sys from PyQt5.QtWidgets import QWidget, QApplication,QPushButton from PyQt5.QtGui import QIc ...

  9. 日历控件QCalendarWidget

    样式:

  10. dubbo服务使用spring-data-mongodb进行时间查询的bug记录

    一.项目情况:spring-boot+mongodb+dubbo. 二.问题:调用dubbo服务并使用spring-data-mongodb的gte,lte时间段比较查询, @Reference(re ...