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

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

/* 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

// 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

import { createSelector } from "reselect";

const initialState = {
  app: {
    users: [{ id: "user01", name: "John" }, { id: "user02", name: "Bob" }],
    tasks: [
      { id: "task01", title: "Wash car", assignee: "user01" },
      { id: "task02", title: "Watch tutorial", assignee: "user01" },
      { id: "task03", title: "Do Homework", assignee: "user02" }
    ]

agoldis

const initialState = {
  app: {
    users: [{ id: "user01", name: "John" }, { id: "user02", name: "Bob" }],
    tasks: [
      { id: "task01", title: "Wash car", assignee: "user01" },
      { id: "task02", title: "Watch tutorial", assignee: "user01" },
      { id: "task03", title: "Do Homework", assignee: "user02" }
    ]
  },
  ui: { /* ... */ }

agoldis

import React from "react";
import { connect } from "react-redux";

const mapStateToProps = (({ userTasksCount }) => ({ userTasksCount }));

class Header extends React.Component {
  render() {
    const { userTasksCount } = this.props;
    return <div>
      {JSON.stringify(userTasksCount)}

agoldis

const initialState = {
  users: [{ id: "user01", name: "John" }, { id: "user02", name: "Bob" }],
  tasks: [
    { id: "task01", title: "Wash car", assignee: "user01" },
    { id: "task02", title: "Watch tutorial", assignee: "user01" },
    { id: "task03", title: "Do Homework", assignee: "user02" }
  ],
  profiles: [
    { id: "profile01", user: "user01", picture: "picture01URL" },
    { id: "profile02", user: "user02", picture: "picture02URL" }

agoldis

const initialState = {
  users: [{ id: "user01", name: "John" }, { id: "user02", name: "Bob" }],
  tasks: [
    { id: "task01", title: "Wash car", assignee: "user01" },
    { id: "task02", title: "Watch tutorial", assignee: "user01" },
    { id: "task03", title: "Do Homework", assignee: "user02" }
  ],
  get userTasks() {
    return this.users.map(user =>
      Object.assign({}, user, {