tomchentw

// the transform function will turn Redux state into nextProps for our component
@connect((state, props) => {
  // extract data from the Redux state that matches our need
  const { ForumReducer, PostReducer } = state;
  // current url params is passed in by react-router
  const { params: { forumId } } = props;

  // filter out our data for this component
  const forum = ForumReducer.get("forumList").find(item => forumId === item.get("id"));
  const posts = PostReducer.getIn(["postIdsByForumId", forumId], new OrderedSet())

tomchentw

// http://git.io/v3Im3
    // at this point, we’re safely to call `renderToString` since all our data are loaded and exists in Redux store
    const markup = React.renderToString(
      <Provider store={store}>
        {() => <Router {...routerState}/>}
      </Provider>
    );

tomchentw

// http://git.io/v3OGo
function fetchData (dispatch, forumId) {
  return dispatch(PostActions.getPostList(forumId));
}

@createEnterTransitionHook(store => (state/*, transition */) => {
  const { AppReducer, PostReducer } = store.getState();
  // load different forum based on our url.
  const { forumId } = state.params;

tomchentw

// http://git.io/v3IqX
// define common function for fetching required data for this component.
function fetchData (dispatch) {
  return dispatch(ForumActions.getForumList());
}

// store is from the factory function. We extract our interested state for this component
@createEnterTransitionHook(store => (/*state, transition */) => {
  const { AppReducer, ForumReducer } = store.getState();

tomchentw

// http://git.io/v3Iq0
  return {
    // create onEnter callback using onEnterCreator factory, also pass in the Redux store.
    onEnter: App.onEnterCreator(store), //onEnterCreator is created by @createEnterTransitionHook decorator
    component: App,

tomchentw

// http://git.io/v3Itp
  // our routes returns a factory function, pass in the Redux store to initialize it
  const routes = require("./routes")(store);

  // create server-side location from the request instance provided by express
  const location = new Location(request.path, request.query);

  // promisified version of Router.run to resolve components for a given location
  return runRouter(routes, location).then(([routerState, transition]) => {

tomchentw

// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right
var Immutable = require("immutable");

var set = new Immutable.OrderedSet([
  1, 2, 3, 4, 7, 8, 9
]).map(function(it) { return console.log("OrderedSet#map" + it) || it * 2; });
console.log("set.toSeq-------");
var seq = set.toSeq();
console.log("set.toSeq-------");

tomchentw

// 可能可以改寫成這樣：
LocationsFetcher.fetchLastResult = null;
LocationsFetcher.fetch = () =>
  if (LocationsFetcher.fetchLastResult) {
    return Promise.reject(new AlreadyCalledError());
  } else {
    return LocationsFetcher.fetchLastResult = doFetchInternal();
  }
};

tomchentw

1. Q: Relay and flux, flux future?
A: Relay -> big app & team

2. Data fetching
Kyle: do fetching in stores instead of action creators
1. large app, use getter of stores and do fetching if required, it'll eventually be there
2. switch api layer, nice to have data fetching logic in one store, the controller code (action creators) dont have to change
3. when fetch data, usually need info that you'll already know in stores

Ian: keep usually in action creators,

tomchentw

'use strict';

var shop = require('../../../common/api/shop');

module.exports = function (context, payload, done) {
    var products = payload.products;

    context.dispatch('CART_CHECKOUT');

    shop.buyProducts(products, function () {