用create-react-app创建一个项目
- 执行
npm i create-react-app -g - 执行
create-react-app redux-example - 执行
cd redux-example - 执行
npm start
浏览器出现以下界面,说明项目创建好了并成功运行
创建相关组件
- 在根目录下创建routes文件夹
- 在routes下创建header和side文件夹
- 在header和side下创建header的容器组件和ui组件,代码见https://gitee.com/huruqing/redux-example
redux相关配置
- 安装redux和react-redux
npm i redux react-redux --save-dev - 创建side的reducer
// 创建action creator
export 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 creator
export 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 (<div
style={{ 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;
