carlrip

const peopleReducer: Reducer<IPeopleState, PeopleActions> = (
  state = initialPeopleState,
  action,
) => {
  switch (action.type) {
    case 'GettingPeople': {
      return {
        ...state,
        loading: true,
      };

carlrip

export function configureStore(): Store<IAppState> {
  const store = createStore(rootReducer, undefined, applyMiddleware(thunk));
  return store;
}

carlrip

interface IProps {
  getPeople: () => Promise<IGotPeopleAction>;
  people: IPerson[];
  peopleLoading: boolean;
  postPerson: (person: IPostPerson) => Promise<IPostedPersonAction>;
  personPosting: boolean;
}

const App: FC<IProps> = ({
  getPeople,

carlrip

npm install styled-components
npm install @types/styled-components --save-dev

carlrip

...

<div>
  <ul>
    {posts.map(({ id, title, body }) => (
      <li key={id}>
        <div>
          <span>{title}</span>
          <span>{body}</span>
        </div>

carlrip

import styled from 'styled-components';

const Container = styled.div`
  width: 400px;
  margin: 30px auto;
`;

const App = () => (
  <Container>
    <ul>

carlrip

// Grays
export const gray1 = '#383737';
export const gray2 = '#565555';
export const gray3 = '#857c81';
export const gray4 = '#b9b9b9';
export const gray5 = '#e0dddd';

// Colors
export const primary1 = '#6ca583';
export const accent1 = '#9b8dab';

carlrip

...
import { fontFamily, fontSize, gray2 } from './Styles';

const Container = styled.div`
  width: 400px;
  margin: 30px auto;
  font-family: ${fontFamily};
  font-size: ${fontSize};
  color: ${gray2};
`;

carlrip

const Container = styled.div`
  width: 400px;
  margin: 30px auto;
  font-family: ${fontFamily};
  font-size: ${fontSize};
  color: ${gray2};
  ul {
    list-style: none;
    padding: 0px 20px;
    background-color: #fff;

carlrip

const Container = styled.div`
  width: 400px;
  margin: 30px auto;
  font-family: ${fontFamily};
  font-size: ${fontSize};
  color: ${gray2};
`;

const List = styled.ul`
  list-style: none;