手把手教你做一个react-redux-demo-阿里云开发者社区

开发者社区> 开发与运维> 正文

手把手教你做一个react-redux-demo

简介: 用create-react-app创建一个项目 执行 npm i create-react-app -g 执行 create-react-app redux-example 执行 cd redux-example 执行 npm start 浏览...

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

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

创建相关组件

  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 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;

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章