Experimenting with plain FSA actions instead of redux-actions.

Author: alexgorbatchev

src/store/interfaces.ts

@@ -4,10 +4,27 @@ export interface IAction {
   type: string;
 }
 
+export interface IPayloadAction<Payload> extends IAction {
+  payload: Payload;
+}
+
+export interface IErrorAction extends IAction {
+  error: boolean;
+}
+
+export interface IFetching {
+  isFetching?: boolean;
+}
+
 export interface IThunk {
   (dispatch: Dispatch): Promise<any>;
 }
 
-export interface IData {
-  data: any;
+export interface INormalized<Entities, Result> {
+  entities: Entities;
+  result: Result;
+}
+
+export interface IReducerMap<TState, TAction> {
+  [action: string]: (state: TState, action: TAction) => TState;
 }

src/store/posts/actions.ts

@@ -1,17 +1,13 @@
-import { REQUEST_POSTS, RECEIVE_POSTS, IPost } from './';
-import { IAction, IThunk, IData } from '../interfaces';
+import { REQUEST_POSTS, RECEIVE_POSTS, IPostsJSON, IPostsAction } from './types';
+import { IAction, IThunk, IPayloadAction } from '../interfaces';
 import fetch from 'isomorphic-fetch';
 
-export interface IPostsAction extends IAction {
-  items: Array<IPost>;
+export function requestPosts(): IAction {
+  return { type: REQUEST_POSTS };
 }
 
-export function requestPosts(): IPostsAction {
-  return { type: REQUEST_POSTS, items: null };
-}
-
-export function receivePosts(json: IData): IPostsAction {
-  return { type: RECEIVE_POSTS, items: json.data };
+export function receivePosts(json: IPostsJSON): IPostsAction {
+  return { type: RECEIVE_POSTS, payload: json };
 }
 
 export function fetchPosts(): IThunk {

src/store/posts/constants.ts

@@ -1,4 +1,3 @@
 export * from './actions';
-export * from './state';
-export * from './constants';
+export * from './types';
 export * from './reducer';

src/store/posts/index.ts

@@ -0,0 +1,8 @@
+import { expect } from 'chai';
+import { postsReducer, fetchPosts, receivePosts, requestPosts } from './';
+
+describe.only('posts-reducer', () => {
+  // it('sets the initial state', () => expect(postsReducer(undefined, increaseCounter(1))).to.eql({ value: 1 }));
+  // it('handles INCREASE_COUNTER', () => expect(postsReducer({ value: 10 }, increaseCounter(1))).to.eql({ value: 11 }));
+  // it('handles DECREASE_COUNTER', () => expect(postsReducer({ value: 10 }, decreaseCounter(1))).to.eql({ value: 9 }));
+});

src/store/posts/reducer-spec.ts

@@ -1,22 +1,33 @@
-import {
-  RECEIVE_POSTS,
-  REQUEST_POSTS,
-  IPostsState,
-  IPostsAction,
-} from './';
+const { normalize, Schema, arrayOf } = require('normalizr');
+import { RECEIVE_POSTS, REQUEST_POSTS, IPostsState, IPostsAction }  from './types';
+import { IPayloadAction, IReducerMap } from '../interfaces';
 
 const initialState: IPostsState = {
   isFetching: false,
-  items: [],
+  entities: [],
+  result: [],
+};
+
+const article = new Schema('articles');
+const user = new Schema('users');
+article.define({ author: user });
+
+const REDUCERS: IReducerMap<IPostsState, IPostsAction> = {
+  [RECEIVE_POSTS](state: IPostsState, action: IPostsAction): IPostsState {
+    const { entities, result } = normalize(action.payload.data, arrayOf(article));
+    return Object.assign({}, state, {
+      entities,
+      result,
+      isFetching: false
+    });
+  },
+
+  [REQUEST_POSTS](state: IPostsState, action: IPostsAction): IPostsState {
+    return Object.assign({}, state, { isFetching: true });
+  },
 };
 
 export function postsReducer(state: IPostsState = initialState, action: IPostsAction): IPostsState {
-  switch (action.type) {
-    case RECEIVE_POSTS:
-      return Object.assign({}, state, { items: action.items, isFetching: false });
-    case REQUEST_POSTS:
-      return Object.assign({}, state, { isFetching: true });
-    default:
-      return state;
-  }
+  const reducer = REDUCERS[action.type];
+  return reducer ? reducer(state, action) : state;
 }

src/store/posts/reducer.ts

@@ -0,0 +1,25 @@
+import { IAction, IFetching, INormalized, IPayloadAction } from '../interfaces';
+
+export interface IAuthor {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export interface IPost {
+  id: string;
+  title: string;
+  body: string;
+  author: IAuthor | string;
+}
+
+export interface IPostsJSON {
+  data: IPost[];
+}
+
+export interface IPostsState extends IFetching, INormalized<IPost[], number[]> { }
+
+export interface IPostsAction extends IPayloadAction<IPostsJSON> { }
+
+export const REQUEST_POSTS: string = 'REQUEST_POSTS';
+export const RECEIVE_POSTS: string = 'RECEIVE_POSTS';