安裝create-react-app
npm install -g create-react-app


創建項目
create-react-app reactreduxrouterdemo
cd reactreduxrouterdemo
安裝第三方模塊
npm install --save redux
npm install --save react-redux
npm install --save react-router


修改index.js
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import { Provider, connect } from 'react-redux';//定義組件 class App extends Component{render() {const {text, onChangeText, onButtonClick} = this.props;return (<div><h1 onClick={onChangeText}> {text} </h1><button onClick={onButtonClick}>click me</button></div>);} }//action const changeTextAction = {type:'CHANGE_TEXT' } const buttonClickAction = {type:'BUTTON_CLICK' }//reducer const initialState = {text: 'Hello' } const reducer = (state = initialState, action) => {switch (action.type) {case 'CHANGE_TEXT':return {text: state.text=='Hello' ? 'world':'Hello'}case 'BUTTON_CLICK':return {text: 'Hello world'}default:return initialState;} }//store let store = createStore(reducer);//映射Redux state到組件的屬性 function mapStateToProps(state) {return { text: state.text } }//映射Redux actions到組件的屬性 function mapDispatchToProps(dispatch){return{onButtonClick:()=>dispatch(buttonClickAction),onChangeText:()=>dispatch(changeTextAction)} }//連接組件 App = connect(mapStateToProps, mapDispatchToProps)(App)//渲染組件 ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root') )







這個例子大概是最簡單的了， 而且每一步注釋都非常清楚了。
運行工程npm start






源代碼工程
https://github.com/chenhaifeng2016/reactreduxrouter

總結

以上是生活随笔為你收集整理的最简单的React和Redux整合的例子的全部內容，希望文章能夠幫你解決所遇到的問題。

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