// 创建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;
     }
}

// 创建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;
    }
}

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容器组件
 */
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 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容器组件
 */
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;