一、目录:
二。编写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"] } } }