ice-admin-template
react + react-router + redux + 封装函数;代码已经封装好了常用的方法和http接口,常量,接口返回码等等,项目可以直接入手,节约开发时间
项目地址:
ice框架ice
使用:
- 启动调试服务:
npm start
- 构建 dist:
npm run build
目录结构:
- react-router @4.x 默认采用 hashHistory 的单页应用
- 入口文件:
src/index.js
- 导航配置:
src/menuConfig.js
- 路由配置:
src/routerConfig.js
- 路由入口:
src/router.jsx
- 布局文件:
src/layouts
- 通用组件:
src/components
- 页面文件:
src/pages
效果图:
redux 与 react
redux 知识点网上很多,可自行百度,在这里实践一下
redux文件结构如下
1、引入注册
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import store from './store'
export default <Provider store={store}>
<Router>{routeChildren}</Router>
</Provider>;
复制代码
当前代码中最主要的就是
import store from ./store
store.js代码如下
import {createStore, combineReducers, applyMiddleware} from 'redux';
import * as tags from './store/reducer';
import thunk from 'redux-thunk';
let store = createStore(
combineReducers({...tags}),
applyMiddleware(thunk)
);
export default store;
复制代码
redux-thunk解决异步的问题 放置这里的都是状态,也就是数据,这些数据有可能是接口数据,也有可能是Boolean的判断
action.js
action.js 与 reducer.js本身没有什么关系,到目前为止,没有把两种相关联起来, action只是纯函数而已
代码如下
import C from './../common/index';
// 初始化获取标签,保存至redux
const action = {
tagsListFunc() {
return dispatch => {
C.axios(C.api('tagList')).then(res=> {
dispatch({
type: 'tagsList',
data: res.data || []
})
})
}
},
showToastFunc() {
return {
type: 'showToast'
}
}
}
export default action;
复制代码
代码中用到dispatch函数,对应异步请求数据而不是纯return,则需要dispatch同步异步
reduce.js
./store/reduce.js
export const reducer = (state, action) => {
if (!state) {
return {
tagsList: [],
sortsList: [],
loading: true
}
}
switch (action.type) {
case 'tagsList':
state = Object.assign(state, {loading: false});
return {
...state,
tagsList: action.data
}
break;
case 'sortsList':
state = Object.assign(state, {loading: false});
return {
...state,
sortsList: action.data
}
break;
case 'showToast':
state = Object.assign(state, {loading: true});
return {
...state
}
}
}
复制代码
根据action中的类型来判断return什么值到页面接受的值
调用页面
import action from './../../../../store/action'
import { connect } from 'react-redux';
class TabTable extends Component {
render() {
return <div></div>
}
}
TabTable = connect(state=> {
return {
tagsList: state.reducer.tagsList,
loading: state.reducer.loading
} // reducer return回来的值
}, {
tagsListFunc: action.tagsListFunc // action中的执行函数
})(TabTable)
export default TabTable
复制代码
react-redcux 把react和redux链接起来了,connect也把reducer和action链接来了,使得action中retrun的值相对于赋值到reducer.js中去
在页面调用函数或调用state
this.props.tagsListFunc();
this.props.tagsList;
复制代码