reduxBlog - decoupled state A

Header.jsx

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)}
    </div>
  }
}

export default connect(mapStateToProps)(Header)

index.js

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import initialState from "./initialState";

import Header from "./Header";
import UserTasks from "./UserTasks";

const store = createStore((state = initialState) => state, initialState);

const Root = () => (
  <Provider store={store}>
    <Header />
    <UserTasks />
  </Provider>
);

render(<Root />, document.getElementById("root"));

intialState.js

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" }
  ]
}

function userTasks() {
  return this.users.map(user =>
    Object.assign({}, user, {
      tasks: this.tasks.filter(task => task.assignee === user.id)
    })
  );
}

function userTasksCount() {
  return this.userTasks.map(user =>
    Object.assign({}, user, { tasksCount: user.tasks.count })
  );
}

Object.defineProperty(initialState, "userTasks", {
  get: userTasks,
  enumerable: false
});

Object.defineProperty(initialState, "userTasksCount", {
  get: userTasksCount,
  enumerable: false
});

export default initialState;

UserTasks.jsx

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

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

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

export default connect(mapStateToProps)(UserTasks)