Typescript + Redux + Typescript Readonly Interfaces + Normalizr

fourth-iteration.ts

// post reducer
interface IPostState
  extends Readonly<{
      postId: number | null;
      isLoading: boolean;
    }> {}

const INITIAL_STATE: IPostState = {
  postId: null,
  isLoading: false,
};

function postReducer(state: IPostState = INITIAL_STATE, action): IPostState {
  switch (action.type) {
    case "FETCHED": {
      return {
        postId: action.payload.postId,
        isLoading: false,
      };
    }
    default: {
      return state;
    }
  }
}

// normalized entity reducer
interface IEntityState
  extends Readonly<{
      posts: {
        [postId: number]: INormalizedPost;
      };
    }> {}

function entityReducer(
  state: IEntityState = { posts: {} },
  action,
): IPostState {
  switch (action.type) {
    case "ADD_ENTITIES": {
      return {
        ...state,
        posts: {
          ...state.posts,
          ...entities.posts,
        },
      };
    }
    case "UPDATED_TITLE": {
      const postToUpdate = state.posts[action.payload.postId];
      if (!postToUpdate) {
        return state;
      }
      return {
        ...state,
        posts: {
          ...state.posts,
          [action.payload.postId]: {
            ...postToUpdate,
            title: action.payload.title,
          },
        },
      };
    }
    default: {
      return state;
    }
  }
}

// action creators
function fetchedPost(postId: number) {
  return {
    type: "FETCHED",
    payload: {
      postId,
    },
  };
}

function addEntities(entities: Partial<IEntityState>) {
  return {
    type: "ADD_ENTITIES",
    payload: {
      entities,
    },
  };
}

// container component
function mapStateToProps(state: IAppState, _routeProps: any) {
  return {
    post: denormalize(state.postState.post, postEntity, state.entities),
  };
}