描述redux和react没有任何关系。Redux可以与React、Angular甚至纯JS搭配使用。但是Redux更适合和React搭配,因为React允许你以状态的形式来描述界面,而Redux非常擅长控制状态的变化。Redux和React的结合需要使用库redux-react案例说明目录├──README.md├──index.js├──action│└──home.js│└──about.js├───actionType│├──index.js├──reducer│└──home.js│└──about.js│└──index.js└──view└──Home.jsx└──About.jsxActionTypethrows两种类型常量exportconstSET_AGE='SET_AGE'exportconstSET_NAME='SET_NAME'Actioncreateaction//home.jsimport{SET_NAME,SET_AGE}from'../actionType'exportfunctionset_age(age){return{type:SET_AGE,age}}exportfunctionset_name(name){return{type:SET_AGE,name}}//about.js同上,是一个模拟,可以写不同的datareducer规则//reducer/home.jsimport{SET_NAME,SET_AGE}from'../ActionType'constinitialState={name:'刘宇',age:100}exportdefault(state=initialState,action)=>{switch(action.type){caseSET_NAME:returnObject.assign({},state,{name:action.name})caseSET_AGE:returnObject.assign({},state,{age:action.age})默认值:returnstate}}//reducer/about.js可以像上面这样自定义home,about})viewbindActionCreators:将actioncreators转换为同名key的对象,但是用dispatch包围每个actioncreator,这样就可以直接调用了connect:连接React组件和Reduxstore。importReact,{Component}from'react';import*aspageActionsfrom'../../action'import{bindActionCreators}from'redux'import{connect}from'react-redux'classInboxextendsComponent{constructor(props){super(props)console.log(this.props)}render(){return(
