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

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

总结

以上是生活随笔为你收集整理的手把手教你做一个react-redux-demo的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。