React

action.js

import 'whatwg-fetch';
import {openSnackbar} from '../../public/action/globalAction';
export function setAttractions(attractions){
	return {
		type:'SET_ATTRACTIONS',
		attractions:attractions
	}
}


export function getAttractions(keyword){
	return function(dispatch){
		let url = 'http://ali-spot.showapi.com/spotList?keyword='+keyword;
		
		fetch(url, {
		  method: "GET",
		  headers: {
		    "Authorization": "APPCODE 557d3e7aaf744971bca3ed75c7c0421f"
		  },
		})
		.then(response => {
			console.log(response.status);
			if(response.status !== 200){
				return
			}
			return response.json();
		})
		.then(data => {
			console.log(data)
			if(!data.showapi_res_code){
				return dispatch(setAttractions(data.showapi_res_body.pagebean));
			}else{
				return dispatch(openSnackbar('aaaaaa')); 
			}
		})
		.catch(e => console.log(e));
	}
}

containerComponent.js

import React from 'react';
import { Provider, connect } from 'react-redux'

import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Snackbar from 'material-ui/Snackbar';

import AttractionsList from './AttractionsList';
import {getAttractions} from './action';

import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';

class Attractions extends React.Component {
  constructor(props){
    super(props);
  }

  handleBlur = (event) => {
    console.log(event.target.value);
    this.props.dispatch(getAttractions(event.target.value));
  }

  render() {

  	let style = {
  		toobar:{
  			margin:'100px 200px'
  		}
  	}

    return (
      <div>
        <Snackbar
          open={this.props.snackbar.open}
          message={this.props.snackbar.message}
          autoHideDuration={4000}
          onRequestClose={this.handleRequestClose}
        />

        <Toolbar style={style.toobar}>
        	<TextField
        	  fullWidth={true}
		        hintText="输入地名/景点名"
            onBlur={this.handleBlur}
		    />
        </Toolbar>
        <AttractionsList list={this.props.attractions.contentlist} />
      </div>
    );
  }
}

// Map Redux state to component props
function mapStateToProps(state) {
  return { 
    attractions: state.Attractions.pagebean,
    snackbar: state.global.snackbar
  }
}

export default connect(mapStateToProps)(Attractions);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, hashHistory, IndexRoute} from 'react-router';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
import thunkMiddleware from 'redux-thunk'

import Home from './Home/home';
import Admin from './Admin/admin';
import TapCollection from './Home/container/TapCollection';
import TapTools from './Home/container/TapTools';
import TapProject from './Home/container/TapProject';

import ToolsBar from './Tool/ToolsBar';
import Attractions from './Tool/Attractions/Attractions';

import AppRedux from './public/reducer'

injectTapEventPlugin();

let store = createStore(
	AppRedux,
	applyMiddleware(
		thunkMiddleware
	)
);

console.log(store.getState());

ReactDOM.render(
	<Provider store={store}>
		<MuiThemeProvider>
		  <Router history={hashHistory}>
			<Route path="/" component={Home}>
				<Route path="collection" component={TapCollection} />
				<Route path="tools" component={TapTools} />
				<Route path="project" component={TapProject} />
			</Route>
			<Route path='tools' component={ToolsBar}>
				<Route path="attractions" component={Attractions} />
			</Route>
			<Route path="/admin" component={Admin} />
		  </Router>
		 </MuiThemeProvider>
 	</Provider>,
  document.getElementById('app')
);

reducer.js

import { combineReducers } from 'redux';

import Home from '../Home/homeReducer';
import Admin from '../Admin/adminReducer';

import Attractions from '../Tool/Attractions/attractionsReducer';

// Reducer
function global(state = {
  draweropen :false, 
  snackbar:{open : false, message :''},
  loading:{status :'hide'},
}, action) {
  switch(action.type){
    case 'TOGGLE_DEAWER':
      return Object.assign({}, state, {
        draweropen: !state.draweropen
      });
    case 'OPEN_SNACKBAR':
      return Object.assign({}. state, {
        snackbar:{
          message: action.message,
          open: false
        }
      });

    default: return state;
  }
  return state;
}

const rootReducer = combineReducers({
  Home,
  Admin,
  global,
  Attractions
})

export default rootReducer;

webpack.js

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var TEM_PATH = path.resolve(APP_PATH, 'template');

module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: {
  	app: path.resolve(APP_PATH, 'index.jsx'),
  },
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: APP_PATH,
        query:{
        	presets:['react', 'es2015', 'stage-0'],
        	"env": {
						"development": {
						 	"presets": ["react-hmre"]
						}
					}
        }
      },
      {
        test: /\.scss$/,
        loaders: 'style-loader!css-loader?modules!sass-loader',
        include: APP_PATH
      }
    ]
  },

  //添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
	    title: 'react app',
	    template: path.resolve(TEM_PATH, 'index.html'),
	    filename: 'index.html',
	    //chunks这个参数告诉插件要引用entry里面的哪几个入口
	    chunks: ['app'],
	    //要把script插入到标签里
	    inject: 'body'
    }),
  ],
  resolve: {
      extensions: ['.js', '.jsx']
  },
  devtool: 'eval-source-map',
};