用create-react-app创建一个项目

1. 执行 npm i create-react-app -g
2. 执行 create-react-app redux-example
3. 执行 cd redux-example
4. 执行 npm start
   浏览器出现以下界面,说明项目创建好了并成功运行
   

创建相关组件

1. 在根目录下创建routes文件夹
2. 在routes下创建header和side文件夹
3. 在header和side下创建header的容器组件和ui组件,代码见https://gitee.com/huruqing/redux-example

redux相关配置

1. 安装redux和react-redux
   npm i redux react-redux --save-dev
2. 创建side的reducer

// 创建action creatorexport function showSideAction(payload) {return {type: 'SHOW-SIDE',payload,}
}// 设置state初始值
const initState = {show: false
}// reducer
export default (state=initState,action)=> {switch (action.type) {case 'SHOW-SIDE':return {...state,show: action.payload}default:return state;}
}

header的reducer

// 创建action creatorexport function setTitleAtion(payload) {return {type: 'SET-TITLE',payload,}
}// 设置state初始值
const initState = {title: '卖座网'
}// reducer 纯函数
export default (state=initState,action)=> {switch (action.type) {case 'SET-TITLE':return {...state,title: action.payload}default:return state;}
}

在目录的index.js配置prover和store

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Privider } from 'react-redux';
import {createStore} from 'redux';
import { combineReducers } from 'redux';
import headerReducer from './routes/header/reducer';
import sideReducer from './routes/side/reducer';const reducers = combineReducers({header: headerReducer,side: sideReducer
})
// 创建store
const store = createStore(reducers);ReactDOM.render(
<Provider store={store}><App />
</Provider>,document.getElementById('root'));serviceWorker.unregister();

把side下面的index.js改造成容器组件

/*** Side容器组件*/
import React from 'react';
import View from './View'
import { connect } from 'react-redux';
import { showSideAction } from './reducer';
import { bindActionCreators } from 'redux';class Side extends React.Component {render() {return <View {...this.props}/>}
}function mapStateToProps(state) {return {show: state.side.show}
}
function mapDispatchToProps(dispatch) {return {showSide: bindActionCreators(showSideAction,dispatch)}
}export default connect(mapStateToProps,mapDispatchToProps
)(Side);

修改side下的View.js,它的显示和隐藏使用state里的show来控制

/*** Side UI组件*/
import React from 'react';
import './View.css'class View extends React.Component {render() {let { show,showSide } = this.props;if (show) {return (<div onClick={()=>{showSide(false)}}><ul className="list"><li className="item">首页</li><li className="item">影片</li><li className="item">影院</li><li className="item">E座卡</li></ul></div>)} else {return '';}}
}export default View;

修改header容器组件和UI组件

/*** header容器组件*/
import React from 'react';
import View from './View';
import { connect } from 'react-redux';
import { showSideAction } from '../side/reducer';
import { bindActionCreators } from 'redux';class Header extends React.Component {render(){return <View {...this.props}/>}
}function mapStateToProps(state) {return {title: state.header.title,show: state.side.show}
}function mapDispatchToProps(dispatch) {return {showSide: bindActionCreators(showSideAction, dispatch)}
}export default connect(mapStateToProps,mapDispatchToProps
)(Header);

/*** headerUi组件*/
import React from 'react';class View extends React.Component {render() {let { title,showSide,show } = this.props;return (<divstyle={{ height: '50px', display: 'flex', alignItems: 'center', background: 'green' }}><button onClick={()=>{showSide(!show)}}>{show?'隐藏':'显示'}菜单</button><span style={{color:'#fff',marginLeft:'15px'}}>{title}</span></div>);}
}export default View;

此demo地址: https://gitee.com/huruqing/redux-example