<file_sep>import RECEIVE_DATA from '../types/data';

import { postsList } from '../helpers/postsData';

const initialState = {
  postListing: [],
};

export default (state = initialState, action) => {
  switch (action.type) {
    case RECEIVE_DATA:
      return {
        ...state,
        postListing: state.postListing.concat(postsList),
      };
    default:
      return state;
  }
};
<file_sep>// @flow

import * as React from 'react';

type Props = {
  value: string,
  onChange: (value: string) => void,
};

export default class InputPreview extends React.PureComponent<Props> {
  static defaultProps = {
    value: 'value',
  };

  handleChange = (e: Object) => {
    this.props.onChange(e.target.value);
  };

  render() {
    const { value } = this.props;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
      </div>
    );
  }
}
<file_sep>import { createSelector } from 'reselect';

import { postsSelector, usersSelector, listingSelector } from '../../selectors';

const getListing = createSelector(postsSelector, usersSelector, listingSelector, (posts, users, listing) =>
  listing.map(id => {
    const post = posts[id];
    return { ...post, user: users[post.author] };
  })
);

export default getListing;
<file_sep>import { combineReducers } from 'redux';

import messageReducer from '../containers/HomePage/reducer';
import usersByIdReducer from './usersByIdReducer';
import postsByIdReducer from './postsByIdReducer';
import postListingReducer from './postListingReducer';
import counterReducer from '../containers/Counter/reducer';

const rootReducer = combineReducers({
  messageReducer,
  usersById: usersByIdReducer,
  postsById: postsByIdReducer,
  postListing: postListingReducer,
  count: counterReducer,
});

export default rootReducer;
<file_sep>import RECEIVE_DATA from '../types/data';
import { getPostsById } from '../helpers/postsData';

const postsById = getPostsById();

const initialState = {
  postsById: {},
};

export default (state = initialState, action) => {
  switch (action.type) {
    case RECEIVE_DATA:
      return { ...state, postsById: { ...state.postsById, postsById } };

    default:
      return state;
  }
};
<file_sep>import getPosts from '../fakeData';

export const postsList = getPosts().posts.map(post => post.id);
export const getPostsById = () => {
  const postsById = {};
  getPosts().posts.forEach(post => {
    postsById[post.id] = post;
  });
  return postsById;
};

export const getUsersById = () => {
  const usersById = {};
  getPosts().users.forEach(user => {
    usersById[user.id] = user;
  });
  return usersById;
};
<file_sep>import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import rootReducer from './reducers/rootReducer';
import RECEIVE_DATA from './types/data';
import getPosts from './fakeData';

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  applyMiddleware(thunk)
);

store.dispatch({
  type: RECEIVE_DATA,
  payload: getPosts(),
});

export default store;
<file_sep>import React from 'react';
import { createStructuredSelector } from 'reselect';
import { connect } from 'react-redux';

import makeGetPosts from './selectors';

type Props = {
  posts: Array<Object>,
};

const Posts = ({ posts }: Props) => (
  <div>
    <h3>Posts</h3>
    <ul>{posts.map(post => <li key={post.id}>{`${post.title} - ${post.user.first} ${post.user.last}`}</li>)}</ul>
  </div>
);

const mapStateToProps = createStructuredSelector({
  posts: makeGetPosts,
});

export default connect(mapStateToProps)(Posts);
<file_sep>// @flow

import React, { Component } from 'react';
import { connect } from 'react-redux';

import increment from './actions';

type Props = {
  increment: () => void,
  count: number,
};

class Counter extends Component<Props> {
  componentDidMount() {
    setInterval(() => {
      this.props.increment();
    }, 500);
  }

  render() {
    return (
      <div>
        <h3>Count: {this.props.count}</h3>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  count: state.count.count,
});

const mapDispatchToProps = (dispatch: Function) => ({
  increment() {
    dispatch(increment());
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);
<file_sep>import INCREMENT from './constants';

export default function() {
  return {
    type: INCREMENT,
  };
}
<file_sep>const RECEIVE_DATA = 'RECEIVE_DATA';
export default RECEIVE_DATA;
<file_sep>// @flow

import React from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';

import getListing from './selectors';

type Props = {
  posts: Array<any>,
};

const ListPost = styled.li`
  background: ${props => (parseInt(props.title.slice(-1)) % 2 === 0 ? 'yellow' : 'green')};
  color: ${props => (parseInt(props.title.slice(-1)) % 2 === 0 ? 'green' : 'yellow')};
`;

const Posts = ({ posts }: Props) => (
  <div>
    <h3>Posts</h3>
    <ul>
      {posts.map(post => (
        <ListPost title={post.title} key={post.id}>
          {`${post.title} - ${post.user.first} ${post.user.last}`}
        </ListPost>
      ))}
    </ul>
  </div>
);

const mapStateToProps = state => ({
  posts: getListing(state),
});

export default connect(mapStateToProps)(Posts);
<file_sep>// @flow

import SET_MESSAGE from './constants';

const initState = {
  message: '',
};

type State = {
  message: string,
};

export default (state: State = initState, action: Object): Object => {
  switch (action.type) {
    case SET_MESSAGE:
      return {
        ...state,
        message: action.payload,
      };
    default:
      return state;
  }
};
<file_sep>import * as React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import InputPreview from '../../components/InputPreview';
import setMessage from './actions';
import Button from '../../styles';

type Props = {
  dispatch: (action: Object) => void,
  messageReducer: Object,
};

class Home extends React.Component<Props> {
  static defaultProps = {
    message: 'message',
  };
  handleChange = value => {
    this.props.dispatch(setMessage(value));
  };

  render() {
    const { message } = this.props.messageReducer;

    return (
      <React.Fragment>
        <InputPreview value={message} onChange={this.handleChange} />
        <p>{message}</p>
        <Link to="/about">
          <Button>Go to about page</Button>
        </Link>
      </React.Fragment>
    );
  }
}

export default connect(state => state)(Home);
<file_sep>import React from 'react';
import { Link } from 'react-router-dom';

import Posts from '../Posts/Posts';
import Counter from '../Counter/Counter';
import PostsByUser from '../PostsByUser/PostsByUser';
import Button from '../../styles';

const AboutButton = Button.extend`
  background: #bada55;
`;

const About = () => (
  <div>
    About
    <Link to="/">
      <AboutButton>Go Home</AboutButton>
    </Link>
    <h1>Reselect Redux</h1>
    <Posts />
    <Counter />
    <h2>User 1</h2>
    <PostsByUser user="user-1" />
    <h2>User 2</h2>
    <PostsByUser user="user-2" />
  </div>
);

export default About;
