ice飞冰管理系统初体验,react-redux简单入门

ice飞冰管理系统初体验,react-redux简单入门

技术杂谈小彩虹2021-07-08 2:59:1760A+A-

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

效果图:

screenshot

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;

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们