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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kuangshp128/article/details/61197083

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

二、效果图如下:

案例效果

三、项目结构

|--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;
展开阅读全文

没有更多推荐了,返回首页