New features discussion

[ben196888]

我們還有未來嗎？（眼神死

[ben196888]

A few quick idea of the technique we might use.

• [ ] Immutable JS
• [ ] Normalize
• [ ] Apollo

[ElaineHuang]

No ImmutableJs, Check this~! https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4#.bt2x0nlsk Maybe we can use this. https://github.com/leoasis/redux-immutable-state-invariant

[ben196888]

Let me show you a brilliant method to seperate the state logic part and view rendering part works. And you never ever worry about the immutable would interrupt ES6 styles.

We create selector function (or helper function as well) for the reducer. For example:

import { Map } from 'immutable';
import { getNextGoodId } from '../API';

const EMPTY_MAP = new Map();
const EMPTY_OBJECT = Object.create({});

export const getOwnerIdByGoodId = (state, goodId) => {
  return state.get(goodId).getIn(['owner', 'id']).toJS() || EMPTY_OBJECT;
};

const goodReducer = (state = EMPTY_MAP, action) => {
  switch (action.type) {
  case 'ADD_GOOD': {
    const goodId = getNextGoodId();
    return state.set(goodId, action.good);
  }
  default:
    return state;
  }
};

export default goodReducer;

As a result, we could still get the state easily in container. Such as

import { connect } from 'react-redux';
import { getStore, getGoodById } from '../store';
import component from './component';

const mapStateToProps = (state, props) => {
  const { goodId } = props;
  const state = getStore().getState();
  const ownerId = getOwnerIdByGoodId(state, goodId);
  return {
    ownerId,
  }
};

export default container = connect(mapStateToProps)(component);