摘要：引入引入組件和綁定結(jié)構(gòu)頁(yè)面組件這個(gè)組件引入做連接引入中的函數(shù)到中處理數(shù)據(jù)獲取中的數(shù)據(jù)組件上會(huì)受到發(fā)來(lái)的數(shù)據(jù)包含發(fā)來(lái)的信息定義函數(shù)定義字段字符串定義的函數(shù)返回一個(gè)高階函數(shù)傳入和再到處理數(shù)據(jù)出字段和函數(shù)供和組件使用類型的請(qǐng)求或者不需要將數(shù)

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結(jié)構(gòu)

var routes = (
  
    
      
        
        
        
        
          
          
        
        
        
      
    
  
);

1.define這個(gè)組件
引入routerAction, connect做reducer連接
引入action中的函數(shù)getDanbaiPacket,dispatch到action中處理數(shù)據(jù)
this.props獲取reducer中的數(shù)據(jù)
組件上componentWillReceiveProps會(huì)受到reducer發(fā)來(lái)的數(shù)據(jù),nextProps包含發(fā)來(lái)的信息.

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函數(shù)
定義type字段字符串
定義dispatch的函數(shù),返回一個(gè)高階函數(shù),傳入dispatch和getState,再dispatch到reducer處理數(shù)據(jù)
return出type字段和函數(shù),供reducer和組件使用.
post類型的請(qǐng)求,或者不需要將數(shù)據(jù)掛載到reducer函數(shù)上的,不需要dispatch到reducer處理,直接用callback處理返回的數(shù)據(jù).

//= 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函數(shù),即可以在組件中被獲取的數(shù)據(jù)
每個(gè)reducer函數(shù)都會(huì)return出一個(gè)對(duì)象,這就是這個(gè)函數(shù)的值,要用Object.assign({}, state, action.data)
state的值會(huì)變化,直接action.data的話,那就只有這一個(gè)值.
可以用Object.assign({}, state, {rules: action.data}),
這樣掛載再reducer函數(shù)上的key為rules.
只要掛載再reducer函數(shù)上的key值有變化,只要有dispatch,就會(huì)觸發(fā)組件render
即使有兩個(gè)reducer處理函數(shù),也是以dispatch為準(zhǔn),dispatch后會(huì)觸發(fā)reducer處理函數(shù),觸發(fā)組件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子組件
使用解構(gòu)賦值,給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.所有請(qǐng)求都把數(shù)據(jù)掛在了reducer函數(shù)上,且都直接返回,造成數(shù)據(jù)雜糅,key值沖突,不易處理邏輯,
又造成重復(fù)render.
解決:

1.post請(qǐng)求或者不需要處理返回?cái)?shù)據(jù)的,直接callback執(zhí)行回掉,在action中不需要dispatch到reducer處理.
2.reducer處理數(shù)據(jù)時(shí),return出來(lái)的值整個(gè)值,使用Object.assign({}, state, action.data),把數(shù)據(jù)
全部返回.

2.Modal的ErrorPopup只需要有一個(gè),error為this.state.error,mode為"simple"則樣式自己寫.
層疊順序?yàn)?SignInPopup > ErrorPopup > 自身的modal
3.this.props.params.id,this.props.location.query只能在Route中的組件獲取.
4.對(duì)每個(gè)接口做錯(cuò)誤處理.
5.對(duì)一些可能先返回undefined的值做保護(hù),可以用解構(gòu)賦值初始值.

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

6.post之后一般有回調(diào),再重新dispatch獲取接口,或者直接在post接口中callbackc處理.