资讯专栏INFORMATION COLUMN

工作流程

Chiclaim / 898人阅读

摘要:引入引入组件和绑定结构页面组件这个组件引入做连接引入中的函数到中处理数据获取中的数据组件上会受到发来的数据包含发来的信息定义函数定义字段字符串定义的函数返回一个高阶函数传入和再到处理数据出字段和函数供和组件使用类型的请求或者不需要将数

main.js

1.引入Route,createStore,combineReducers

const {Router, Route, Redirect, IndexRoute, browserHistory} = ReactRouter;
const {Provider, connect} = ReactRedux;
const { createStore, combineReducers, applyMiddleware, compose} = Redux;
const {syncHistoryWithStore, routerMiddleware, routerReducer, push } = ReactRouterRedux;
const thunkMiddleware = require("redux-thunk");

2.引入组件和reducer

const DanbaiPacket = require("Containers/DanbaiPacket");
const DanbaiPacket = require("Containers/DanbaiPacket");

3.绑定reducer,store

const reducer = combineReducers({
  routing: routerReducer,
  localizationReducer: LocalizationReducer,
  accountReducer: AccountReducer,
  notificationReducer: NotificationReducer,
  headlineDetailReducer: HeadlineDetailReducer,
  headlineEditorReducer: HeadlineEditorReducer,
  headlineListReducer: HeadlineListReducer,
  userCollectionsReducer: UserCollectionsReducer,
  userArticlesReducer: UserArticlesReducer,
  signInPopupReducer: SignInPopupReducer,
  notifyMessageReducer: NotifyMessageReducer,
  redPacketReducer: RedPacketReducer,
  danbaiPacketReducer: DanbaiPacketReducer
});

const middleware = routerMiddleware(browserHistory);
let initState = {};

let store = createStore(
    reducer,
    {},
    compose(
      applyMiddleware(thunkMiddleware, middleware),
      (window.RAILS_ENV === "development" && window.devToolsExtension) ? window.devToolsExtension() : f=>f
    )
);

4.Router结构

var routes = (
  
    
      
        
        
        
        
          
          
        
        
        
      
    
  
);
页面组件

1.define这个组件
引入routerAction, connect做reducer连接
引入action中的函数getDanbaiPacket,dispatch到action中处理数据
this.props获取reducer中的数据
组件上componentWillReceiveProps会受到reducer发来的数据,nextProps包含发来的信息.

define("Containers/DanbaiPacket", function(require, exports) {
  const { routerActions } = ReactRouterRedux;
  const { connect } = ReactRedux;
  const { getDanbaiPacket } = require("Actions/DanbaiPacketAction");

  var DanbaiPacket = React.createClass({
    getInitialState: function() {
      return {

      };
    },
    componentDidMount: function() {
      this.props.dispatch(getDanbaiPacket(this.props.params.id));
    },
    render: function() {
      const { localization, current_account, danbaiPacketDetail } = this.props;
      
      return (
        
aaa
); } }); function mapStateToProps(state, ownProps) { return { localiztion: state.localizationReducer.languages[state.localizationReducer.languages.current], current_account: state.accountReducer.current_account, danbaiPacketDetail: state.danbaiPacketReducer.danbaiPacketDetail }; } return connect(mapStateToProps)(connect(null, routerActions)(DanbaiPacket)); });

2.action
定义Action函数
定义type字段字符串
定义dispatch的函数,返回一个高阶函数,传入dispatch和getState,再dispatch到reducer处理数据
return出type字段和函数,供reducer和组件使用.
post类型的请求,或者不需要将数据挂载到reducer函数上的,不需要dispatch到reducer处理,直接用callback处理返回的数据.

//= require ../../util/fetch_posts
//= require ./notify_message_action

define("Actions/DanbaiPacketAction", function(require, exports) {
  const fetch = require("util/FetchPosts");
  const { addNotifyMesaage } = require("Actions/NotifyMessageAction");
  const INIT_DANBAI_PACKET = "INIT_DANBAI_PACKET";

  function initDanbaiPacket(data) {
    return {
      type: INIT_DANBAI_PACKET,
      data: data
    };
  }

  function getDanbaiPacket(id, callback) {
    return (dispatch, getState) => {
      fetch.get({
        url: "/api/events/" + id + ",json",
        dataType: "json",
        data: {
          sonkwo_client: "web"
        },
        success: function(res) {
          dispatch(initDanbaiPacket(res))
        },
        error: function(xhr) {
          if (xhr.status === 404) {
            dispatch(addNotifyMesaage("wufazhaodaoziyuan"));
          }
        }
      });
    }
  }

  return {
    INIT_DANBAI_PACKET,
    getDanbaiPacket
  }
});

3.reducer
从action引入type字符串
定义reducer函数,即可以在组件中被获取的数据
每个reducer函数都会return出一个对象,这就是这个函数的值,要用Object.assign({}, state, action.data)
state的值会变化,直接action.data的话,那就只有这一个值.
可以用Object.assign({}, state, {rules: action.data}),
这样挂载再reducer函数上的key为rules.
只要挂载再reducer函数上的key值有变化,只要有dispatch,就会触发组件render
即使有两个reducer处理函数,也是以dispatch为准,dispatch后会触发reducer处理函数,触发组件render.

//= require ../actions/danbai_packet_action

define("Reducers/DanbaiPacketReducer", function(require, exports) {
  const { INIT_DANBAI_PACKET } = require("Actions/RedPacketAction");
  const { combineReducers } = Redux;

  function danbaiPacketDetial(state={}, action) {
    switch (action.type) {
      case INIT_DANBAI_PACKET:
        return Object.assign({}, state, action.data);
      default:
        return state;
    }
  }

  return combineReducers({
    danbaiPacketDetial: danbaiPacketDetial
  });
});

4.子组件
define子组件
使用解构赋值,给rules初始值
也可以使用componentWillReceiveProps

define("Components/Example", function(require, exports) {
  var Example = React.createClass({
    getInitialState: function() {
      return {

      };
    },
    componentWillReceiveProps: function() {

    },
    componentDidMount: function() {

    },
    render: function() {
      const { rules = [] } = this.props;

      return (
        
example { rules.map((item, index) => { return (
id: { item.id }, type: { item.type }
) }) }
); } }); return Example; });

在父组件中引入,传入danbaiPacketDetail.rules

问题总结

1.所有请求都把数据挂在了reducer函数上,且都直接返回,造成数据杂糅,key值冲突,不易处理逻辑,
又造成重复render.
解决:

1.post请求或者不需要处理返回数据的,直接callback执行回掉,在action中不需要dispatch到reducer处理.
2.reducer处理数据时,return出来的值整个值,使用Object.assign({}, state, action.data),把数据
全部返回.

2.Modal的ErrorPopup只需要有一个,error为this.state.error,mode为"simple"则样式自己写.
层叠顺序为:SignInPopup > ErrorPopup > 自身的modal
3.this.props.params.id,this.props.location.query只能在Route中的组件获取.
4.对每个接口做错误处理.
5.对一些可能先返回undefined的值做保护,可以用解构赋值初始值.

const {a = []} = this.props;

6.post之后一般有回调,再重新dispatch获取接口,或者直接在post接口中callbackc处理.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84260.html

相关文章

  • Activiti就是这么简单

    摘要:介绍什么是是由软件在年月日发布的业务流程管理框架,它是覆盖了业务流程管理工作流服务协作等领域的一个开源的灵活的易扩展的可执行流程语言框架。第二部分是表示表的用途的两个字母标识。 Activiti介绍 什么是Activiti? Activiti5是由Alfresco软件在2010年5月17日发布的业务流程管理(BPM)框架,它是覆盖了业务流程管理、工作流、服务协作等领域的一个开源的、灵...

    everfly 评论0 收藏0
  • 使用Python批量处理工作簿和工作

    摘要:使用批量处理工作簿和工作表批量新建并保存工作簿批量打开一个文件夹中的打开工作簿批量重命名一个工作簿的所有工作表批量重命名多个工作簿批量重命名多个工作簿中的同名工作表将一个工作簿的所有工作表批量复制到其他工作簿按条件将一 ...

    maxmin 评论0 收藏0
  • Activiti工作流从入门到入土:完整Hello World大比拼(Activiti工作流 API

    摘要:通过流程引擎获取了一个对象仓库对象由仓库的服务对象产生一个部署对象配置对象,用来封装部署操作的相关配置。辅导员审批的审批人员是欧阳思海。部署流程定义从与流程定义和部 文章源码托管:https://github.com/OUYANGSIHA...欢迎 star !!! 本来想着闲来无事,前面在项目中刚刚用到了工作流 Activiti 框架,写写博客的,但是,事情总是纷纷杂杂,一直拖延到现...

    ghnor 评论0 收藏0
  • 请不要怪罪流程

    摘要:但流程不是死的,尤其在互联网公司,只要有助于我们的目标达成,那么流程只是一阵东风。工作中并不是所有事情都可以依赖流程去保证万无一失。所以不要怪罪流程,这并不是流程的问题,而是人的问题。所以请不要再怪罪流程啦,以人为本,才是长久之计。 本文由作者周巧芬授权网易云社区发布。 笔者所在的团队这段时间正在两个版本的交接期,前一个版本马上要上线了,但后一个版本的需求早在三周前就已经启动,却迟迟没...

    MiracleWong 评论0 收藏0
  • PHPOA办公系统:新型工作流引擎4.0,快速提升OA办公方式

    摘要:更严重的是,会导致信息系统的失控。实现了数据的同步交换和共享,从而简化多余流程,消除重复工作,有效提升工作效率和精度。工作流将大大深化系统的应用,让系统发挥出全新的价值。而不具有工作流特点的系统,将很快被时代所抛弃。 一、工作流1.0时代终结OA系统的应用正在不断深化,正在逐渐完成从无纸化到智能化的转变,作为OA系统应用的核心,工作流技术也同样发生了很大的转变。 我们知道,对工作流比较...

    afishhhhh 评论0 收藏0
  • Activiti工作流从入门到入土:工作流简介

    摘要:基于许可的开源平台,创始人是的项目架构师,它特色是提供了插件,开发人员可以通过插件直接绘画出业务流程图。二工作流引擎对象,这是工作的核心。五总结工作流的概念就先介绍这么多了,更多的去官网查看,下一节将用一个入门的实例来对工作流进行讲解。 文章源码托管:https://github.com/OUYANGSIHA...欢迎 star !!! 一、activiti介绍 Activiti5是由...

    Mr_houzi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<