最简单的React和Redux整合的例子

安装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

 

[javascript] view plain copy

1. import React, { Component } from 'react';  
2. import ReactDOM from 'react-dom';  
3. import { createStore } from 'redux';  
4. import { Provider, connect } from 'react-redux';  
5.   
6.   
7. //定义组件  
8. class App extends Component{  
9.     render() {  
10.         const {text, onChangeText, onButtonClick} = this.props;  
11.         return (  
12.             <div>  
13.                 <h1 onClick={onChangeText}> {text} </h1>  
14.                 <button onClick={onButtonClick}>click me</button>  
15.             </div>  
16.         );  
17.     }  
18. }  
19.   
20.   
21. //action  
22. const changeTextAction = {  
23.         type:'CHANGE_TEXT'  
24. }  
25. const buttonClickAction = {  
26.         type:'BUTTON_CLICK'  
27. }  
28.   
29.   
30. //reducer  
31. const initialState = {  
32.     text: 'Hello'  
33. }  
34. const reducer = (state = initialState, action) => {  
35.     switch (action.type) {  
36.         case 'CHANGE_TEXT':  
37.             return {  
38.                 text: state.text=='Hello' ? 'world':'Hello'  
39.             }  
40.         case 'BUTTON_CLICK':  
41.             return {  
42.                 text: 'Hello world'  
43.             }  
44.         default:  
45.             return initialState;  
46.     }  
47. }  
48.   
49. //store  
50. let store = createStore(reducer);  
51.   
52. //映射Redux state到组件的属性  
53. function mapStateToProps(state) {  
54.     return { text: state.text }  
55. }  
56.   
57. //映射Redux actions到组件的属性  
58. function mapDispatchToProps(dispatch){  
59.     return{  
60.         onButtonClick:()=>dispatch(buttonClickAction),  
61.         onChangeText:()=>dispatch(changeTextAction)  
62.     }  
63. }  
64.   
65. //连接组件  
66. App = connect(mapStateToProps, mapDispatchToProps)(App)  
67.   
68. //渲染组件  
69. ReactDOM.render(  
70.     <Provider store={store}>  
71.         <App />  
72.     </Provider>,  
73.     document.getElementById('root')  
74. )  

这个例子大概是最简单的了， 而且每一步注释都非常清楚了。
运行工程npm start






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