react-redux连接react与redux入门案例[分目录结构]
一、实现一个点击点击翻译文字内容
二、效果图如下:
![react-redux连接react与redux入门案例[分目录结构]_第1张图片](http://img.e-com-net.com/image/info8/a7eacfa3ed384f66b5612075efbeaa73.jpg)
三、项目结构
|--src //项目文件
|----actions //存放actions的文件
|------index.js
|----components //存放展示组件
|------Hello.jsx
|----container //存放容器组件
|------ConnectHello.js
|----reducers //存放reducers
|------ch2en.js
|------index.js
|--index.js //入口文件
|--index.html //页面内容
|--package.json //依赖包
|--webpack.config.js //webpack配置文件
|--node_modules //依赖文件四、项目搭建
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页面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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(
,
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 (
{msg}
)
}
}
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:[email protected]
* @version:1.0
* @fileName:index
* @direction:
* @title:
*/
'use strict';
import {combineReducers} from 'redux';
import ch2en from './ch2en';
const rootReducer = combineReducers({
ch2en,
})
export default rootReducer;