项目作者: AndrewPHunter

项目描述 :
React-Redux project for Udacity React-nanodegree
高级语言: JavaScript
项目地址: git://github.com/AndrewPHunter/readable.git
创建时间: 2017-09-24T18:38:55Z
项目社区:https://github.com/AndrewPHunter/readable

开源协议:MIT License

下载


Readable

React Nanodegree Project

This project is based off of the Readable API Server starting template
which contained the code for the backend api server that is interacted with for the development of the project.

Directory Structure


The project makes the decision to combine the api-server and frontend application into one central project for both ease of development and
management of source control. Each individual project, api-server and frontend, maintain their own dependencies and are tied together by npm
scripts found at the root of the project.



The project makes the purposeful decision of grouping reusable components into a common controls directory which are all exported by the root
index.js file for each of locating assets. An example of this can be found below:

  1. import {
  2. PostDetailPage,
  3. PostCommentPage,
  4. FullPageDialog,
  5. PostForm,
  6. CommentForm
  7. } from '../components/controls'

Technology Used

Getting Started

  • clone the repo
  • setup projects and dependencies
    1. yarn install
  • start the backend and development server
    1. yarn start

Design Decisions


Overall the layout and design of the app is typical for react, redux, react-router apps. The major difference that may be noted is the concise
effort to maintain reducers that are more deterministic and easily testable by removing switch and if statements and relying specifically
on language features to maximize testability and determinism.



I am unsure if this deterministic reducer style is worth maintaining but felt it was interesting to try out for this project. An
example is found below:

  1. //all functions exported for testing purposes
  2. export const loadPosts = (state, {posts})=>posts;
  3. export const loadPostsForCategory = (state, {posts})=>([
  4. ...state.filter(item=>posts[0] && posts[0].category && item.category !== posts[0].category),
  5. //this is a null guard for the spread operator to ensure proper array shape on the event of a null object
  6. ...(posts || [])
  7. ]);
  8. export const addPost = (state, {post})=>([
  9. ...state,
  10. post
  11. ]);
  12. export const editPost = (state, {post})=>([
  13. ...state.filter(item=>post && item.id !== post.id),
  14. //this is a null guard for the spread operator to ensure proper array shape on the event of a null object
  15. ...(post && [post] || []) // eslint-disable-line no-mixed-operators
  16. ]);
  17. const reducer = {
  18. [LOAD_ALL_POSTS]: loadPosts,
  19. [LOAD_POSTS_FOR_CATEGORY]: loadPostsForCategory,
  20. [LOAD_POST]: editPost,
  21. [ADD_POST]: addPost,
  22. [EDIT_POST]: editPost,
  23. [UPVOTE_POST]: editPost,
  24. [DOWNVOTE_POST]: editPost,
  25. [DELETE_POST]: editPost
  26. };
  27. export default (state=[], {type, ...action})=>
  28. reducer[type] ? reducer[type](state, action) : state;

API Server

Information about the API server and how to use it can be found in its README file.

Contributing

This repository is used for a nanodegree program that I am participating in so I will not be accepting pull requests.