4.1 package.json文件的内容
{ "name": "react-demo05", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --inline --host localhost --port 3000" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.3.2", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.23.0", "react": "^15.4.2", "react-dom": "^15.4.2", "react-redux": "^5.0.3", "redux": "^3.6.0", "redux-thunk": "^2.2.0", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.1" } }4.2webpack.config.js文件内容
/** * @author:水痕 * @time:2017-02-25 17:27 * @email:332904234@qq.com * @version:1.0 * @fileName:webpack.config * @title: */ 'use strict'; module.exports = { entry:{ index:'./index.js' }, output:{ path:__dirname, filename:'[name].build.js', }, module:{ loaders:[ { test:/\.(js|jsx)$/, exclude:'/node_modules/', loader:'babel-loader', query:{ presets:['es2015','react'] } } ] }, resolve:{ extensions:['.js',".css",".jsx"] } }4.3index.html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li{ list-style: none; } </style> </head> <body> <div id="app"></div> </body> <script src="./index.build.js"></script> </html>4.4index.js文件内容
/** * @author:水痕 * @time:2017-03-10 13:58 * @email:332904234@qq.com * @version:1.0 * @fileName:app1 * @direction: * @title: */ 'use strict'; import React,{Component} from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; import thunk from 'redux-thunk'; import {createStore,applyMiddleware} from 'redux'; import ConnectHello from './src2/containers/ConnectHello'; import reducer from './src2/reducers'; let store = createStore(reducer,applyMiddleware(thunk)); ReactDOM.render( <Provider store={store}> <ConnectHello /> </Provider>, document.getElementById("app") )4.5action/index.js文件
/** * @author:水痕 * @time:2017-03-10 13:46 * @email:332904234@qq.com * @version:1.0 * @fileName:index * @direction: * @title: */ 'use strict'; export const TOCHINE = "TOCHINE"; export const TOENGLISH = "TOENGLISH"; export function toCH() { return{ type:TOCHINE, } } export function toEN() { return{ type:TOENGLISH, } }4.6component/Hello.jsx
/** * @author:水痕 * @time:2017-03-10 13:49 * @email:332904234@qq.com * @version:1.0 * @fileName:Hello * @direction: * @title: */ 'use strict'; import React, {Component,PropTypes} from "react"; export default class Hello extends Component { render() { const {msg,toCH,toEN} = this.props; return ( <div> <button onClick={toCH}>翻译成中文</button> <p>{msg}</p> <button onClick={toEN}>翻译成英文</button> </div> ) } } Hello.proTypes = { msg:PropTypes.string.isRequired, toCH:PropTypes.func.isRequired, toEN:PropTypes.func.isRequired, }4.7containers/ConnectHello.js
/** * @author:水痕 * @time:2017-03-10 13:52 * @email:332904234@qq.com * @version:1.0 * @fileName:ConnectHello * @direction: * @title: */ 'use strict'; import {connect} from 'react-redux'; import Hello from './../components/Hello'; import * as actionCreate from './../actions'; export default connect(function (state) { console.log(state) //这个地方是state是reducers/ch2en.js中传递过来的 //state.ch2en这个要根据reducers/ch2en.js定义的方法名来写不要盲目的复制 //msg是传递到Hello.jsx组件中的变量 return{ msg:state.ch2en } },actionCreate)(Hello);4.8reducers/ch2en.js
/** * @author:水痕 * @time:2017-03-10 13:54 * @email:332904234@qq.com * @version:1.0 * @fileName:ch2en * @direction: * @title: */ 'use strict'; import {TOCHINE,TOENGLISH} from './../actions'; let initState = "hello word"; export default function ch2en(state = initState,action) { switch (action.type){ case TOCHINE: return "你好世界"; case TOENGLISH: return "hello word"; default: return state; } }4.9reducers/index.js
/** * @author:水痕 * @time:2017-03-10 13:57 * @email:332904234@qq.com * @version:1.0 * @fileName:index * @direction: * @title: */ 'use strict'; import {combineReducers} from 'redux'; import ch2en from './ch2en'; const rootReducer = combineReducers({ ch2en, }) export default rootReducer;