agoldis

// Users list component mapper
const mapStateToProps = ({ users, comments }) => ({
  users: users.map(user => ({
    ...user,
    booksCount: user.books.length,
    commentsCount: comments.filter(c => c.user === user.id).length
  }))
});

// Books list component mapper

agoldis

/* initialState.js */
const books = [ /* ... */ ]
const users = [ /* ... */ ]
const comments = [ /* ... */ ];

const usersSummary = function() {
  return this.users.map(user => ({
    ...user,
    booksCount: user.books.length,
    commentsCount: this.comments.filter(c => c.user === user.id).length

agoldis

/* initialState.js */
const books = [ /* ... */ ]
const users = [ /* ... */ ]
const comments = [ /* ... */ ];

const usersSummary = function() {
  return this.users.map(user => ({
    ...user,
    booksCount: user.books.length,
    commentsCount: this.comments.filter(c => c.user === user.id).length

agoldis

const propsA = {};
Object.defineProperty(propsA, "someField", {
  get: () => 42,
  enumerable: false
});
const propsB = { someField: 42 };

console.log({ ...propsA }); // {}
console.log({ ...propsB }); // { someField: 42 }
console.log({ someField: propsA.someField }); // { someField: 42 }

agoldis

const deriveState = state => {
  state.foo = "bar";
  return state;
}

const enhanceStore = createStore => (reducer, preloadedState, enhancer) => {
  const store = createStore(reducer, preloadedState, enhancer);
  const _originalGetState = store.getState;
  store.getState = () => deriveState(_originalGetState());
  return store;

agoldis

import { createStore, applyMiddleware, compose } from "redux";
import { initialState } from "./initialState";
import { reducer } from "./reducer";
import { enhanceStore } from "./storeEnhancer";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
  reducer,
  initialState,

agoldis

import { compose } from "redux";

const usersSummary = function() {
  return this.users.map(user => ({
    ...user,
    booksCount: user.books.length,
    commentsCount: this.comments.filter(c => c.user === user.id).length
  }));
};

agoldis

import { deriveState } from "./deriveState";

export const enhanceStore = createStore => (
  reducer,
  preloadedState,
  enhancer
) => {
  const store = createStore(reducer, preloadedState, enhancer);
  const _getState = store.getState;
  store.getState = () => deriveState(_getState());

agoldis

import { compose } from "redux";

const usersSummary = function() {
  return this.users.map(user => ({
    ...user,
    booksCount: user.books.length,
    commentsCount: this.comments.filter(c => c.user === user.id).length
  }));
};

agoldis

/* other derived state methods */

const moveToApp = state =>
  Object.defineProperties(state, {
    users: {
      get: function() {
        return this.app.users;
      },
      enumerable: false,
      configurable: true