react redux 简单案例

最新推荐文章于 2022-06-20 11:18:17 发布

weixin_30572613

最新推荐文章于 2022-06-20 11:18:17 发布

阅读量95

点赞数

文章标签： javascript webpack json ViewUI

原文链接：http://www.cnblogs.com/cherryblog/p/7528480.html

版权

一、目录：

二。编写actives里的index.js

<!DOCTYPE html>
<html>
<head>
　　 <title>Example</title>
</head>
<body>
　　<div id="root">
　　</div>
　　<script src="/static/bundle.js"></script>
</body>
</html>

三、编写reducters里的counter.js和index.js

　　1) counter.js

　　import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions';

　　export default function counter(state = 0, action) {
　　　　switch (action.type) {
　　　　case INCREMENT_COUNTER:
　　　　　　return state + 1;
　　　　case DECREMENT_COUNTER:
　　　　　　return state - 1;
　　　　default:
　　　　　　return state;
　　　　}
　　}

　　2）用combineReducers 合并多个reducer

　　　　import { combineReducers } from 'redux';
　　　　import counter from './counter';

　　/**
　　* 虽然本例中只有一个reducer，但还是使用了`combineReducers`来进行合并，便于后期的拓展。
　　* 在进行合并后，计数器的数值将被转移到`state.counter`中。
　　*/

　　const rootReducer = combineReducers({
　　　　counter,
　　);

　　export default rootReducer;

四、编写 containers (从connect里读数据)的组件

　　import Counter from '../components/Counter';

　　import { bindActionCreators } from 'redux';
　　import { connect } from 'react-redux';
　　import * as ActionCreators from '../actions';

　　export default connect(
　　　　state => ({ counter: state.counter }),
　　　　dispatch => bindActionCreators(ActionCreators, dispatch)
　　)(Counter);

五、编写compoent组件

　　import React, { PropTypes } from 'react';

　　function Counter({ counter, increment, decrement, incrementIfOdd, incrementAsync }) {
　　return (
　　　　<p>
　　　　　　Clicked: {counter} times
　　　　　　{' '}
　　　　　　<button onClick={increment}>+</button>
　　　　　　{' '}
　　　　　　<button onClick={decrement}>-</button>
　　　　　　{' '}
　　　　　　<button onClick={incrementIfOdd}>Increment if odd</button>
　　　　　　{' '}
　　　　　　<button onClick={() => incrementAsync()}>Increment async</button>
　　　　</p>
　　　　);
　　}

六、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import counter from './app/js/reducers/';
import Connect1 from './app/js/conaicter/connect.js';

const store = createStore(counter, applyMiddleware(thunk));
const rootEl = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <div>
      <h2>使用react-redux连接</h2>
      <ul>
        <li>
          connect()的前两个参数分别为函数和对象：
          <Connect1 />
        </li>
      </ul>
    </div>
  </Provider>, rootEl);

七、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>reatTest</title>
</head>
<body>
  <div id="root"></div>
  <script src="static/bundle.js"></script></body>
</html>

----------------------完成-----------------------

配文件

1）webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry:[
        'webpack-hot-middleware/client',
        './index.js'
    ], 
    output: {
        path: path.join(__dirname, 'dist'), 
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    module:{
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }, {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=25000'
            }]
    },
    devServer: {
        contentBase: './dist', 
        historyApiFallback: true,
        inline: true, 
        port: 8080, 
    }
}

2) server.js

/* eslint-disable */
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');

var app = new (require('express'))();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));

app.get("/", function(req, res) {
  res.sendFile(__dirname + '/dist/index.html')
});

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==> ?  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
});

3) package.json

{
  "name": "testdome",
  "version": "1.0.0",
  "description": "React Redux example",
  "scripts": {
    "start": "node server.js",
    "test": "webpack-dev-server --hot --open --content-base",
    "deploy": "webpack -p --progress --config webpack.config.js"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.28.5",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.5",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.9.1"
  },
  "dependencies": {
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "redux-thunk": "^2.2.0"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

4) .babelrc

{
  "presets": [
    "react",
    "es2015"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

转载于:https://www.cnblogs.com/cherryblog/p/7528480.html

weixin_30572613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react redux 简单案例

一、目录：二。编写actives里的index.js<!DOCTYPE html><html> <head> 　　 <title>Example</title> </head> <body> 　　<div id="root"> 　　</div> 　　&...
复制链接

扫一扫