课react全家桶及原理解析lesson4redux瑞客

Redux安装reduxredux上手react-Reduxredux实现kreact- ;(;(previousState,action)=>Atotype.reduce(reducer,于相同的类型。保持reducer纯净非常重要Atotype.reduce(reducer,

constconstarray1=[1,2,3,constreducer=(accumulator,currentValue)=>+//1+2+3+//expectedoutput://5+1+2+3+console.log(array1.reduce(reducer,//expectedoutput:functionfunction{}function{}function{}functionfunction{if(funcs.length===0){}elseif(funcs.length==={return}elsereturnfuncs.reduce((left,right)=>(...args)=>}}compose(fRedux安装npmnpminstallredux--importimport{createStore}fromconstcounterReducer=(state=0,action){switch(action.type){case'add':returnstate+1case'minus':returnstate-1return}}conststore=exportdefaultimportReact,{Component}from"react";importstorefrom"../store/ReduxStore";exportdefaultclassReduxPageextends{componentDidMount(){store.subscribe(() }add=()=>store.dispatch({type:"add"minus=()=>store.dispatch({type:"minus"stayStatic=()=>store.dispatch({type:"others"render(){console.log("store",store);return(<button<button<button}}importimportstorefromconstrender=)}createStore创建reducergetStatedispatchsubscribereact-npmnpminstallreact-redux--Provider为后代组件提供importimportReactfrom'react'importReactDomfrom'react-dom'importAppfrom'./App'importstorefromimport{Provider}from'react-redux'<Provider)npmrunejectnpminstall@babel/plugin-proposal-"babel":{"babel":{[{"legacy":}]["react-]importReact,{Component}from"react";import{connect}from"react-redux";classReactReduxPageextends{render()const{num,add,minus}=ps;return(<button<button}}constmapStateToProps=state{return{num:state,constmapDispatchToProps{add:()=>return{type:"add"minus:()=>return{type:"minus"exportdefaultmapStateToProps,状态映射mapStateToPropsmapDispatchToProps,//派发映射Redux只是个纯粹的状态管理器npmnpminstallredux-thunkredux-logger--importimport{createStore,applyMiddleware}from"redux";importloggerfrom"redux-logger";importthunkfrom"redux-conststore=applyMiddleware(logger,constconstmapDispatchToProps{add:()=>return{type:"add"minus:()=>return{type:"minus"asyAdd:()=>dispatch{setTimeout(()=>//异步结束后，手动执行dispatchdispatch({type:"add"});},app/node_modules/@babel/runtime/helpers/slicedToArray'at ckMissingModule‘，就npmadd@babel/runtime*1.actionexportexportconstadd=(){return{type:"add"exportconstminus=(){return{type:"minus"exportconstasyAdd=()=>dispatch{setTimeout(()=>{dispatch({type:"add"});},importimportReact,{Component}from"react";import{connect}from"react-redux";import{add,minus,asyAdd}fromclassReactReduxPageextends{render()const{num,add,minus,asyAdd}=ps;return(<button<button<button}}constmapStateToProps=state{returnnum:constmapDispatchToProps{//此处exportdefaultmapStateToProps,//状态映射mapStateToPropsmapDispatchToProps,//派发 exportconstcounterReducerexportconstcounterReducer=(state=0,action){switch(action.type){case"add":console.log("stat",state);returnstate+1;case"minus":returnstate-1;return}importimport{createStore,applyMiddleware}from"redux";importloggerfrom"redux-logger";importthunkfrom"redux-import{counterReducer}fromconststore=applyMiddleware(logger,importimport{combineReducers}fromconststorecreateStore(combineReducers({counter:counterReducer}),applyMiddleware(logger,importimportReact,{Component}from"react";import{connect}from"react-redux";import{add,minus,asyAdd}fromclassReactReduxPageextends{render()console.log("props",const{counter,add,minus,asyAdd}=ps;const{num}=counter;return<button<button<button}}constmapStateToProps=state{return{counter:state,constmapDispatchToProps{add,exportdefaultmapStateToProps,//状态映射mapStateToPropsmapDispatchToProps,//派发 exportfunctioncreateStore(reducer,enhancer){if(enhancer){return}letcurrentState=letcurrentListeners=

}

}functioncurrentState=reducer(currentState,action)return}return{getState,subscribe,dispatch}}constconstcounterReducer=(state=0,action){switch(action.type){case"add":console.log("stat",state);returnstate+1;case"minus":returnstate-1;returnreturn}conststore=exportdefaultexportfunction//returncreateStore=>(...args) createStore(...args)let=constmidApi{getState:store.getState,}//使中间件可以获取状态值、派发constmiddlewareChain=middlewares.map(middleware=>//compose可以middlewareChain函数数组合并成一个函数dispatchcompose(...middlewareChain)(store.dispatch)return}}}exportfunctionexportfunctioncompose(...funcs){if(funcs.length==0){return}if{return}returnfuncs.reduce((left,right)=>(...args)=>functionfunctionlogger({dispatch,{returndispatch=>action=>//console.log(action.type+'//return}}conststore=constconstthunk=({dispatch,getState})=>dispatch=>=>if(typeofaction=={returnaction(dispatch,}return}conststore=createStore(counterReducer,importimportReact,{Component}fromimportstorefromexportdefaultclassMyReduxPageextends{componentDidMount(){store.subscribe((){ //}asyAddHandle=(){store.dispatch(dispatch=>{setTimeout(()=>{dispatch({"add"},{return<buttononClick={()=>store.dispatch({type:<button<buttononClick={()=>store.dispatch({type:"minus"})}>minus</button><button}}react-redux实现kreact-实现一个Provider组件可以传递importReactfromimportPropTypesfrom'prop-import{bindActionCreators}from'./kkb-exportconstconnect=(mapStateToProps=state=>state,mapDispatchToProps={})=>( ponent)=>{return ponent //class组件中静态contextTypes可以获取上下文ContextstaticcontextTypes={store:}context){super(props,context)this.state={}}const{store}=this.context}const{store}=//state=>({num:conststateProps=////{add:(...args)=>constdispatchProps=bindActionCreators(mapDispatchToProps,store.dispatch)...ps,//...stateProps,//num:...dispatchProps//add:(...args)=>}}return ponent }}}exportclassProviderponent{staticchildContextTypes={store:PropTypes.object}getChildContext()return{store:this.store}{super(props,context)this.store=props.store}render()return}}functionfunctionbindActionCreator(creator,dispatch){return(...args)=>}exportfunction////{add:(...args)=>dispatch(creator(...args))}returnObject.keys(creators).reduce((ret,item)=>{ret[item]=bindActionCreator(creators[item],dispatch)returnretimportimportReact,{useContext,useState,useEffect}constContext=exportfunction{return<Context.Provider}exportconstconnect(mapStateToProps=state=>state,mapDispatchToProps={},)=>Cmp=>return()=>conststore=constgetProps=()=>conststateProps=mapStateToProps(store.getState());constdispatchProps=bindActionCreators(returnconst[props,setProps]=useState({...getProps()});useEffect(()=>{store.subscribe(()=>setProps({