cld2-react框架搭建完成

config/webpack.common.config.js

@@ -2,9 +2,10 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
+  //devtool: 'cheap-module-eval-source-map',
   entry: {
     contact: './src/contact/index.js',
-    framework: ['react','react-dom'],
+    framework: ['react','react-dom','redux','react-redux'],
     staff:'./src/staff/index.js',
     workbench:'./src/workbench/index.js',
   },
@@ -20,6 +21,18 @@ module.exports = {
         use: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.(jpg|png|gif)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'images/',
+            limit: 8192,
+          },
+        }
+      }
+  
       // {
       //   test: /\.css$/,
       //   use: [

config/webpack.prod.config.js

@@ -1,12 +1,58 @@
 const merge = require('webpack-merge');
 const common = require('./webpack.common.config.js');
 
+const path = require('path');
+
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = merge(common, {
 
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [ 
+          MiniCssExtractPlugin.loader,
+          'css-loader' 
+        ]
+      },
+      {
+        test: /\.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'less-loader'
+        ]
+      },
+      {
+        test: /\.(sass|scss)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+
+    ]
+  },
+
     optimization: {
+      minimizer: [
+        //new UglifyJsPlugin(),
+        new OptimizeCssAssetsPlugin({
+          assetNameRegExp:/\.css$/g,
+          cssProcessor:require("cssnano"),
+          cssProcessorPluginOptions:{
+            preset:['default', { discardComments: { removeAll:true } }]
+          },
+          canPrint:true
+        })
+  
+      ],
         splitChunks: {
           chunks: 'all',
           minSize: 30000,
@@ -31,7 +77,15 @@ module.exports = merge(common, {
 
   mode: 'production',
   output: {
-    filename: 'nodejs/[name].[chunkhash:8].bundle.js',
+    filename: 'nodejs/[name].[hash].bundle.js',
+  },
+  mode: 'development',
+  devServer: {
+    contentBase: path.resolve(__dirname, '../dist'),
+    open: true,
+    port: 9090,
+    compress: true,
+    hot: true
   },
   plugins: [
     new HtmlWebpackPlugin({
@@ -43,7 +97,11 @@ module.exports = merge(common, {
       //   removeComments: true,
       //   collapseWhitespace: true,
       // },
-    })
-    //,new CleanWebpackPlugin()
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'nodecss/[name].[hash].css',
+      chunkFilename: 'css/[id].[hash].css',
+    }),
+    //new CleanWebpackPlugin(),
   ]
 });

dist/js/app.bundle.js

@@ -50,7 +50,7 @@ var myapp_config = {
 	DEBUGGING MODE
 	debugState = true; will spit all debuging message inside browser console.
 	*/
-	debugState: true, // outputs debug information on browser console
+	debugState: false, // outputs debug information on browser console
 	/*
 	Turn on ripple effect for buttons and touch events
 	Dependency: 

node_modules/css-loader/package.json

@@ -1,5 +1,5 @@
 {
-  "_from": "css-loader",
+  "_from": "css-loader@^3.4.2",
   "_id": "css-loader@3.4.2",
   "_inBundle": false,
   "_integrity": "sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==",
@@ -9,14 +9,14 @@
     "ajv-keywords": "3.4.1"
   },
   "_requested": {
-    "type": "tag",
+    "type": "range",
     "registry": true,
-    "raw": "css-loader",
+    "raw": "css-loader@^3.4.2",
     "name": "css-loader",
     "escapedName": "css-loader",
-    "rawSpec": "",
+    "rawSpec": "^3.4.2",
     "saveSpec": null,
-    "fetchSpec": "latest"
+    "fetchSpec": "^3.4.2"
   },
   "_requiredBy": [
     "#DEV:/",
@@ -24,8 +24,8 @@
   ],
   "_resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz",
   "_shasum": "d3fdb3358b43f233b78501c5ed7b1c6da6133202",
-  "_spec": "css-loader",
-  "_where": "G:\\micro\\react\\cld2",
+  "_spec": "css-loader@^3.4.2",
+  "_where": "G:\\micro\\react\\cld2_react",
   "author": {
     "name": "Tobias Koppers @sokra"
   },

node_modules/file-loader/package.json

@@ -1,5 +1,5 @@
 {
-  "_from": "file-loader",
+  "_from": "file-loader@^6.0.0",
   "_id": "file-loader@6.0.0",
   "_inBundle": false,
   "_integrity": "sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==",
@@ -12,14 +12,14 @@
     "minimist": "1.2.5"
   },
   "_requested": {
-    "type": "tag",
+    "type": "range",
     "registry": true,
-    "raw": "file-loader",
+    "raw": "file-loader@^6.0.0",
     "name": "file-loader",
     "escapedName": "file-loader",
-    "rawSpec": "",
+    "rawSpec": "^6.0.0",
     "saveSpec": null,
-    "fetchSpec": "latest"
+    "fetchSpec": "^6.0.0"
   },
   "_requiredBy": [
     "#DEV:/",
@@ -27,8 +27,8 @@
   ],
   "_resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz",
   "_shasum": "97bbfaab7a2460c07bcbd72d3a6922407f67649f",
-  "_spec": "file-loader",
-  "_where": "G:\\micro\\react\\cld2",
+  "_spec": "file-loader@^6.0.0",
+  "_where": "G:\\micro\\react\\cld2_react",
   "author": {
     "name": "Tobias Koppers @sokra"
   },

node_modules/style-loader/package.json

@@ -1,5 +1,5 @@
 {
-  "_from": "style-loader",
+  "_from": "style-loader@^1.1.3",
   "_id": "style-loader@1.1.3",
   "_inBundle": false,
   "_integrity": "sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==",
@@ -9,14 +9,14 @@
     "ajv-keywords": "3.4.1"
   },
   "_requested": {
-    "type": "tag",
+    "type": "range",
     "registry": true,
-    "raw": "style-loader",
+    "raw": "style-loader@^1.1.3",
     "name": "style-loader",
     "escapedName": "style-loader",
-    "rawSpec": "",
+    "rawSpec": "^1.1.3",
     "saveSpec": null,
-    "fetchSpec": "latest"
+    "fetchSpec": "^1.1.3"
   },
   "_requiredBy": [
     "#DEV:/",
@@ -24,8 +24,8 @@
   ],
   "_resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.1.3.tgz",
   "_shasum": "9e826e69c683c4d9bf9db924f85e9abb30d5e200",
-  "_spec": "style-loader",
-  "_where": "G:\\micro\\react\\cld2",
+  "_spec": "style-loader@^1.1.3",
+  "_where": "G:\\micro\\react\\cld2_react",
   "author": {
     "name": "Tobias Koppers @sokra"
   },

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --inline --config ./config/webpack.dev.config.js",
+    "start": "webpack-dev-server --inline --config ./config/webpack.prod.config.js",
+    "react": "react-scripts start",
     "build": "webpack --config ./config/webpack.prod.config.js"
   },
   "keywords": [],
@@ -20,14 +21,30 @@
     "css-loader": "^3.4.2",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.0.4",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^4.0.0",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
+    "axios": "^0.19.2",
+    "immutable": "^4.0.0-rc.12",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.1.2",
+    "redux": "^4.0.5",
+    "redux-immutable": "^4.0.0",
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^5.0.1"
   }
 }

public/sub_index.html

@@ -14,18 +14,18 @@
   <!-- Remove Tap Highlight on Windows Phone IE -->
   <meta name="msapplication-tap-highlight" content="no">
   <!-- base css -->
-  <link rel="stylesheet" media="screen, print" href="../css/vendors.bundle.css">
-  <link rel="stylesheet" media="screen, print" href="../css/app.bundle.css">
-  <link rel="stylesheet" media="screen, print" href="../css/cld-custom.css">
+  <link rel="stylesheet" media="screen, print" href="../../css/vendors.bundle.css">
+  <link rel="stylesheet" media="screen, print" href="../../css/app.bundle.css">
+  <link rel="stylesheet" media="screen, print" href="../../css/cld-custom.css">
   <!-- Place favicon.ico in the root directory -->
-  <link rel="shortcut icon" href="../img/favicon/favicon.ico">
-  <link rel="stylesheet" media="screen, print" href="../css/fa-regular.css">
-  <link rel="stylesheet" media="screen, print" href="../css/fa-solid.css">
-  <link rel="stylesheet" media="screen, print" href="../css/fa-brands.css">
+  <link rel="shortcut icon" href="../../img/favicon/favicon.ico">
+  <link rel="stylesheet" media="screen, print" href="../../css/fa-regular.css">
+  <link rel="stylesheet" media="screen, print" href="../../css/fa-solid.css">
+  <link rel="stylesheet" media="screen, print" href="../../css/fa-brands.css">
 
-  <script src="../js/vendors.bundle.js"></script>
-<script src="../js/app.bundle.js"></script>
-<script src="../js/cld-custom.js"></script>
+  <script src="../../js/vendors.bundle.js"></script>
+<script src="../../js/app.bundle.js"></script>
+<script src="../../js/cld-custom.js"></script>
 
 </head>
 

src/app.css

@@ -0,0 +1,13 @@
+.App {
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: lightcoral;
+  }
+  
+  h1 {
+    font-size: 16px;
+    color: #fff;
+  }
+  

src/common/axios_auth.js

@@ -0,0 +1,51 @@
+import axios from 'axios';
+//取消请求
+let CancelToken = axios.CancelToken
+axios.create({
+    timeout: 15000 ,// 请求超时时间
+    headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
+})
+ 
+//开始请求设置，发起拦截处理
+axios.interceptors.request.use(config => {
+    //得到参数中的requestname字段，用于决定下次发起请求，取消相应的  相同字段的请求
+    //post和get请求方式的不同，使用三木运算处理
+    console.log('dddd222');
+    //let requestName = config.method === 'post'?config.data.requestName :config.params.requestName
+    //判断，如果这里拿到上一次的requestName，就取消上一次的请求
+    // if(requestName) {
+    //     if(axios[requestName]&&axios[requestName].cancel){
+    //         axios[requestName].cancel()
+    //     }
+    //     config.cancelToken = new CancelToken(c => {
+    //         axios[requestName] = {}
+    //         axios[requestName].cancel = c
+    //     })
+    // }
+    return config
+}, error => {
+    return Promise.reject(error)
+})
+// respone拦截器
+axios.interceptors.response.use(
+    response => {
+        // const res = response.data;
+ 
+        // //这里根据后台返回来设置
+        // if (res.msg === "success") {
+        //     return response.data;
+        // } else {
+        //     return Promise.reject(error);
+        // }
+        //window.location.href = '/login';
+
+        return response
+    },
+    error => {
+        return Promise.reject(error)
+    }
+)
+ 
+export default axios

src/workbench/app.js

@@ -1,9 +1,32 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import Submenu from './submenu';
+import store from './store';
 
-function App() {
-  return (
-    <div className="App">Hello workbench react!!!!</div>
-  );
+//import { Redirect } from 'react-router-dom';
+// if(!login){
+
+// }else{
+//   return <Redirect to='/'/>
+// }
+
+
+import '../app.css';
+
+class App extends Component {
+  render() {
+    //console.log(this.props.store);
+    return (
+      <Provider store={store}>
+        <div>
+          <Submenu />
+          <div className="App">Hello workbench react!!!!</div>
+        </div>
+      </Provider>
+    );
+  }
 }
 
 export default App;
+
+

src/workbench/index.js

@@ -2,4 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
+
+//ReactDOM.render('heelo', document.getElementById('root'));
 ReactDOM.render(<App />, document.getElementById('root'));

src/workbench/store/index.js

@@ -0,0 +1,11 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import reducer from './reducer';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(reducer, composeEnhancers(
+    applyMiddleware(thunk)
+));
+
+export default store;

src/workbench/store/reducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux-immutable';
+import { reducer as submenuReducer } from '../submenu/store';
+
+const reducer = combineReducers({
+    submenu: submenuReducer
+});
+
+export default reducer;

src/workbench/style.js

@@ -0,0 +1,47 @@
+import { injectGlobal } from 'styled-components';
+
+injectGlobal`
+	html, body, div, span, applet, object, iframe,
+	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+	a, abbr, acronym, address, big, cite, code,
+	del, dfn, em, img, ins, kbd, q, s, samp,
+	small, strike, strong, sub, sup, tt, var,
+	b, u, i, center,
+	dl, dt, dd, ol, ul, li,
+	fieldset, form, label, legend,
+	table, caption, tbody, tfoot, thead, tr, th, td,
+	article, aside, canvas, details, embed, 
+	figure, figcaption, footer, header, hgroup, 
+	menu, nav, output, ruby, section, summary,
+	time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline;
+	}
+	/* HTML5 display-role reset for older browsers */
+	article, aside, details, figcaption, figure, 
+	footer, header, hgroup, menu, nav, section {
+		display: block;
+	}
+	body {
+		line-height: 1;
+	}
+	ol, ul {
+		list-style: none;
+	}
+	blockquote, q {
+		quotes: none;
+	}
+	blockquote:before, blockquote:after,
+	q:before, q:after {
+		content: '';
+		content: none;
+	}
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+`;

src/workbench/submenu/index.js

@@ -0,0 +1,179 @@
+//import React from 'react';
+// import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { BrowserRouter, Route,Link } from 'react-router-dom';
+// import { CSSTransition } from 'react-transition-group';
+import { actionCreators } from './store';
+
+// const Submenu = (props) => {
+//     return (
+//         <div>
+//             <input onFocus={props.handleInputFocus} />
+//             {props.menu}</div>
+//     )
+
+// }
+
+/**
+ * 可替换成无状态组件
+ */
+
+
+class Submenu extends PureComponent {
+
+    
+
+    getListArea() {
+        const { list, menu } = this.props;
+        // const newList = list.toJS();
+        // const pageList = [];
+
+        // if (newList.length) {
+        // 	for (let i = (page - 1) * 10; i < page * 10; i++) {
+        // 		pageList.push(
+        // 			<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
+        // 		)
+        // 	}
+        // }
+        //可以直接获得输入框里的内容
+        menu;
+        if (true) {
+            return (
+                <div>
+                    {
+                    list.map((item) => {
+                        return <div key={item}>{item}</div>
+                    })
+                }
+                </div>
+            )
+        } else {
+            return null;
+        }
+    }
+
+
+    render() {
+        const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
+        return (
+            <div>
+                <BrowserRouter>
+                <div>
+                    
+                    <ul>
+                        <li><Link to='/'>首页</Link></li>
+                        <li><Link to='/company'>关于</Link></li>
+                       
+                    </ul>
+
+	      			{/* <Route path='/' exact component={Home}></Route>
+	      			<Route path='/detail' exact component={Detail}></Route> */}
+                    <Route path='/' exact render={()=><div>联系人</div>} ></Route>
+                    <Route path='/company' exact render={()=><div>公司</div>} ></Route>
+                    
+	      		</div>
+                </BrowserRouter>
+                {/* innerRef */}
+                {inputValue}
+                <input onFocus={() => handleInputFocus(list)} ref={(input)=>{this.ivalue=input}} onChange={()=>handleInputChange(this.ivalue)}  />
+                {menu}
+                <div>{this.getListArea()}</div>
+            </div>
+        );
+    }
+
+    //组件即将要被挂在的时候执行的方法--
+    componentDidMount(){
+        //逻辑代码可以写在mapDispathToProps里 this.props.方法
+
+        // axios.get('/api/submenuList.json').then((res) => {
+        //     const data = res.data;
+        //     dispatch(changeList(data.data));
+        // }).catch(() => {
+        //     console.log('error');
+        // })
+    }
+
+}
+
+
+
+/**
+ * store里的数据映射到这个组件里的state
+ * @param {*} state 
+ */
+const mapStateToProps = (state) => {
+
+    return {
+        //menu: state.submenu.menu
+        menu: state.getIn(['submenu', 'menu']),
+        list: state.getIn(['submenu', 'list']),
+        inputValue: state.getIn(['submenu', 'inputValue']),
+    }
+    // return {
+    // 	focused: state.getIn(['header', 'focused']),
+    // 	list: state.getIn(['header', 'list']),
+    // 	page: state.getIn(['header', 'page']),
+    // 	totalPage: state.getIn(['header', 'totalPage']),
+    // 	mouseIn: state.getIn(['header', 'mouseIn'])
+    // }
+}
+
+
+/**
+ * 要改变store里的内容需要调用dispatch方法
+ * @param {*} dispatch 
+ */
+const mapDispathToProps = (dispatch) => {
+    return {
+        handleInputFocus(list) {
+
+            // const action = {
+            //     type: 'aearch_focus'
+            // };
+            //发送给store--提取出action--避免发送重复的ajax请求
+            (list.size === 0) && dispatch(actionCreators.getList());
+            // if(list.size>0){
+            //     dispatch(actionCreators.getList());
+            // }
+            dispatch(actionCreators.searchFocus());
+        },
+        handleInputChange(ivalueElem){
+           
+            dispatch(actionCreators.changeInputValue(ivalueElem.value));
+        },
+    }
+    // return {
+    // 	handleInputFocus(list) {
+    // 		(list.size === 0) && dispatch(actionCreators.getList());
+    // 		dispatch(actionCreators.searchFocus());
+    // 	},
+    // 	handleInputBlur() {
+    // 		dispatch(actionCreators.searchBlur());
+    // 	},
+    // 	handleMouseEnter() {
+    // 		dispatch(actionCreators.mouseEnter());
+    // 	},
+    // 	handleMouseLeave() {
+    // 		dispatch(actionCreators.mouseLeave());
+    // 	},
+    // 	handleChangePage(page, totalPage, spin) {
+    // 		let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
+    // 		if (originAngle) {
+    // 			originAngle = parseInt(originAngle, 10);
+    // 		}else {
+    // 			originAngle = 0;
+    // 		}
+    // 		spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
+
+    // 		if (page < totalPage) {
+    // 			dispatch(actionCreators.changePage(page + 1));
+    // 		}else {
+    // 			dispatch(actionCreators.changePage(1));
+    // 		}
+    // 	}
+    // }
+}
+
+export default connect(mapStateToProps, mapDispathToProps)(Submenu);

src/workbench/submenu/store/actionCreators.js

@@ -0,0 +1,52 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+
+import axios from '../../../common/axios_auth.js';
+// import axios from 'axios';
+
+
+
+//actionType
+export const searchFocus = () => ({
+    type: constants.SEARCH_FOCUS
+});
+
+export const getList = () => {
+    return (dispatch) => {
+        axios.get('/api/submenuList.json').then((res) => {
+            const data = res.data;
+            dispatch(changeList(data.data));
+        }).catch(() => {
+            console.log('error');
+        })
+    }
+};
+
+export const changeInputValue = (value) => (  {
+    type: constants.CHANGE_INPUTVALUE,
+    data:fromJS(value),
+});
+
+const changeList = (data) => ({
+    type: constants.CHANGE_LIST,
+    data: fromJS(data),
+    // totalPage: Math.ceil(data.length / 10)
+});
+
+// export const searchBlur = () => ({
+// 	type: constants.SEARCH_BLUR
+// });
+
+// export const mouseEnter = () => ({
+// 	type: constants.MOUSE_ENTER
+// });
+
+// export const mouseLeave = () => ({
+// 	type: constants.MOUSE_LEAVE
+// });
+
+// export const changePage = (page) => ({
+// 	type: constants.CHANGE_PAGE,
+// 	page
+// });
+

src/workbench/submenu/store/constants.js

@@ -0,0 +1,3 @@
+export const SEARCH_FOCUS = 'submenu/SEARCH_FOCUS';
+export const CHANGE_LIST ='submenu/CHANGE_LIST';
+export const CHANGE_INPUTVALUE ='submenu/CHANGE_INPUTVALUE';

src/workbench/submenu/store/index.js

@@ -0,0 +1,5 @@
+import reducer from './reducer';
+import * as actionCreators from './actionCreators';
+import * as constants from './constants';
+
+export { reducer,actionCreators,constants }

src/workbench/submenu/store/reducer.js

@@ -0,0 +1,55 @@
+import * as constants from './constants';
+//锁定state不可修改，导致错误y
+import { fromJS } from 'immutable';
+
+
+const defaultState = fromJS({
+    menu: 'hello submenu-t00022323222!!!',
+    list:[],
+    inputValue:'',
+});
+
+
+export default (state = defaultState, action) => {
+
+    // switch(action.type) {
+	// 	case constants.SEARCH_FOCUS:
+	// 		return state.set('focused', true);
+	// 	case constants.SEARCH_BLUR:
+	// 		return state.set('focused', false);
+	// 	case constants.CHANGE_LIST:
+	// 		return state.merge({
+	// 			list: action.data,
+	// 			totalPage: action.totalPage
+	// 		});
+	// 	case constants.MOUSE_ENTER:
+	// 		return state.set('mouseIn', true);
+	// 	case constants.MOUSE_LEAVE:
+	// 		return state.set('mouseIn', false);
+	// 	case constants.CHANGE_PAGE:
+	// 		return state.set('page', action.page);
+	// 	default:
+	// 		return state;
+	// }
+    if(action.type===constants.CHANGE_INPUTVALUE){
+        return state.set('inputValue',action.data);
+
+    }
+
+    if(action.type===constants.SEARCH_FOCUS){
+        return state.set('menu','clicke me');
+        // return {
+        //     menu:'clicke me'
+        // }
+    }
+    if(action.type===constants.CHANGE_LIST){
+        return state.set('list',action.data);
+        //return state.set('menu','clicke me');
+
+        // return state.merge({
+        //     list: action.data,
+        //     //totalPage: action.totalPage
+        // });
+    }
+    return state;
+}