diff --git a/.project b/.project new file mode 100644 index 0000000000000000000000000000000000000000..412a6b0139029075aaf511783d104a4f5667efb2 --- /dev/null +++ b/.project @@ -0,0 +1,28 @@ + + + react + + + + + + com.aptana.ide.core.unifiedBuilder + + + + + + com.aptana.projects.webnature + + + + 1546949253171 + + 26 + + org.eclipse.ui.ide.multiFilter + 1.0-name-matches-false-false-node_modules + + + + diff --git a/package.json b/package.json index 3fbc3492e602815dae19d7ef0a6a6d16b23ac761..159ac5ccd726dcc1264f0a14f20a8610d639f9f4 100644 --- a/package.json +++ b/package.json @@ -42,8 +42,10 @@ "react-dev-utils": "^5.0.2", "react-dom": "^16.7.0", "react-loadable": "^5.5.0", + "react-redux": "^6.0.0", "react-router-dom": "^4.3.1", "redux": "^4.0.1", + "redux-thunk": "^2.3.0", "resolve": "1.6.0", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", diff --git a/src/action/actionType.js b/src/action/actionType.js new file mode 100644 index 0000000000000000000000000000000000000000..c616835520315af1743628f4f7ec344bd7caba09 --- /dev/null +++ b/src/action/actionType.js @@ -0,0 +1,2 @@ +export const ADD = 'ADD' +export const JIAN = 'JIAN' diff --git a/src/action/count.js b/src/action/count.js new file mode 100644 index 0000000000000000000000000000000000000000..b1d366436a771daa210db26fa0062c8845e3005f --- /dev/null +++ b/src/action/count.js @@ -0,0 +1,25 @@ +// export const add = { +// type: 'ADD' +// } +import * as actionType from './actionType' +export const add = () => { + return { + type: actionType.ADD + } +} +export const jian = () => { + return { + type: actionType.JIAN + } +} + +export const addAsync = () => { + return dispatch => { + setTimeout(() => { + console.log(1111) + dispatch({ + type: actionType.ADD + }) + }, 1000) + } +} diff --git a/src/components/AppFrame/AppFrame.js b/src/components/AppFrame/AppFrame.js index e8528a5ecb4ca7fa0539a60ffebf33d8cb8646f2..dfa80a396bb730a38e2409f9fac204d495812559 100644 --- a/src/components/AppFrame/AppFrame.js +++ b/src/components/AppFrame/AppFrame.js @@ -3,9 +3,17 @@ import { Layout, Menu, Icon } from 'antd' import { withRouter } from 'react-router-dom' import './AppFrame.less' import routes from '@/routes' +import { connect } from 'react-redux' const { Header, Content, Sider } = Layout const navRoutes = routes.filter(route => route.isNav === true) // 装饰器的写法 需要安装babel插件npm install --save-dev babel-plugin-transform-decorators-legacy +const mapState = state => { + return { + counter: state.count.counter + } +} + +@connect(mapState) @withRouter export default class AppFrame extends Component { static getDerivedStateFromProps(props) { @@ -27,10 +35,13 @@ export default class AppFrame extends Component { this.props.history.push(key) } render() { + console.log(this.props) return (
-
Hello world + 后台管理
+
+ Hello world + 后台管理{this.props.counter} +
diff --git a/src/index.js b/src/index.js index 6ba835603f8309f1120ab0db0ad53cdcdc12ae01..20b40c79cc20e1a2a027e9c7ddf4a0390f67c9a3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,16 @@ import React from 'react' import ReactDOM from 'react-dom' import App from './App' -import {BrowserRouter as Router,Route} from 'react-router-dom' - +import { BrowserRouter as Router, Route } from 'react-router-dom' +// Provider是react-redux提供的一个组件，需要一个参数store +import { Provider } from 'react-redux' +import store from './store' ReactDOM.render( - - - - , - document.getElementById('root')) + + + + + , + , + document.getElementById('root') +) diff --git a/src/pages/SysSetting/SysSetting.js b/src/pages/SysSetting/SysSetting.js index a5dbd46fa30b52362305e91a8eccffff52bf8694..d186bc1cac9b15f636b4b8cc71e04231104b8b25 100644 --- a/src/pages/SysSetting/SysSetting.js +++ b/src/pages/SysSetting/SysSetting.js @@ -1,7 +1,45 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' +import { add, jian, addAsync } from '../../action/count' +// connect react-redux提供的一个高阶组件，里面的第一个参数是一个方法，这个方法有一个参数state +//实际上是getState()的值 +const mapStateToProps = state => { + console.log(state) + return { + counter: state.count.counter + } +} +// connect react-redux提供的一个高阶组件，里面的第二个参数是mapDispatchToProps， +//这个方法有一个参数dispatch实际就是store.dispatch()方法 +// const mapDispatchToProps = dispatch => { +// return { +// add: () => { +// dispatch(add()) +// }, +// jian: () => { +// dispatch(jian()) +// } +// } +// } +@connect( + mapStateToProps, + { add, jian, addAsync } +) export default class SysSetting extends Component { render() { - return
系统设置
+ console.log(this.props) + const { counter, add, jian, addAsync } = this.props + return ( +
+ 系统设置 +
+ + {counter} + + +
+
+ ) } } diff --git a/src/reducers/count.js b/src/reducers/count.js new file mode 100644 index 0000000000000000000000000000000000000000..41bda0c22a429a4cefbf634e57da2ac760e3ce7f --- /dev/null +++ b/src/reducers/count.js @@ -0,0 +1,21 @@ +import * as actionType from '../action/actionType' +const initState = { + counter: 10 +} +//reducer 必须是一个方法 有两个参数 第一个是state 第二个参数是action +export default (state = initState, action) => { + switch (action.type) { + case actionType.ADD: + return { + ...state, + counter: state.counter + 1 + } + case actionType.JIAN: + return { + ...state, + counter: state.counter - 1 + } + default: + return state + } +} diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d5aa68043a9de002ada8f1711150b3f87655d265 --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,8 @@ +//用于合并reducer +import { combineReducers } from 'redux' +import count from './count' +import ui from './ui' +export default combineReducers({ + count, + ui +}) \ No newline at end of file diff --git a/src/reducers/ui.js b/src/reducers/ui.js new file mode 100644 index 0000000000000000000000000000000000000000..03cf341bcf184482c484d6f85a2027da6a33bdc2 --- /dev/null +++ b/src/reducers/ui.js @@ -0,0 +1,5 @@ +export default () =>{ + return { + title: 'holle world +' + } +} \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000000000000000000000000000000000000..67fff5233c65cc7904eb855a56fe6d245537e20d --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,6 @@ +import { createStore, applyMiddleware } from 'redux' +import thunk from 'redux-thunk' +import rootReducers from '../reducers' + +// 不能直接传一个对象 必须合并后再传一个参数 +export default createStore(rootReducers, applyMiddleware(thunk))