原生实现一个react-redux的代码示例
自己动手实现一个react-redux
之前试过自己动手实现一个redux，这篇blog主要记录动手实现一个react-redux的过程。
这个react-redux还有一点点小瑕疵，我以一个计数器作为例子来实现的。
这是目录结构:
这里的connect.js文件就是react-redux。
├─component │connect.js │counter.js │ └─store index.js
index.js：
importReactfrom"react";
importReactDom,{render}from"react-dom";
importCouterfrom"./component/counter";
import{Provider}from"./component/connect"importstorefrom"./store/index"ReactDom.render(
./store/index.js:
import{createStore}from"redux";
functionreducer(state={number:0},action){
switch(action.type){
case"add":
return{number:state.number+action.count}
default:
returnstate;
}
}
exportdefaultcreateStore(reducer);
./component/connect.js:
importReactfrom"react";
importPropTypesfrom"prop-types";
//Provider是一个组件接受一个store属性将其内容挂载在上下文context//这样后代才可以都有办法拿到classProviderextendsReact.Component{
staticchildContextTypes={
//设置上下文的类型是对象
store:PropTypes.object
}
getChildContext(){
//获取并设置后代上下文的内容
return{store:this.props.store}
}
render(){
returnthis.props.children
}
}
letconnect=(mapStateToProps,mapDispatchToProps)=>(comp)=>{
returnclassProxyextendsReact.Component{
staticcontextTypes={
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
./component/counter.js:
importReactfrom"react";
import{connect}from"./connect";
exportdefaultclassCounterextendsReact.Component{
constructor(props){
super(props);
}
render(){
return(
{
this.props.add(5);
}}>+
{this.props.n}
)
}
}
letmapStateToProps=(state)=>{
return{n:state.number}
};
letmapDispatchToProps=(dispatch)=>{
return{
add:(count)=>{
dispatch({type:"add",count:count})
}
}
}
exportdefaultconnect(mapStateToProps,mapDispatchToProps)(Counter)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。