用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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。