ice-admin-template

react + react-router + redux + 封装函数；代码已经封装好了常用的方法和http接口，常量，接口返回码等等，项目可以直接入手，节约开发时间

项目地址：

ice-admin-template

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;
复制代码