react-redux连接react与redux入门案例[分目录结构]

来源：互联网发布：淘宝做尾单童装编辑：程序博客网时间：2024/05/23 16:46

一、实现一个点击点击翻译文字内容

二、效果图如下:

案例效果

三、项目结构

|--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页面

<!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;

3 0