Project Address:Github.com/Nealyang/Re…

I wanted to serialize a series of blogs after the completion of the project, but as the development went on, I did meet many pits and consulted many people. So I thought, why not share the harvest while recording the pits. Sharing is good, of course, but it would be even more beautiful if we could pool our ideas. Our slogan is: never lose the tail

This blog for serial code blog synchronous update blog, with the future development of the project may encounter in front of the inappropriate place will be revised back. If there is anything wrong ~ welcome brothers don’t add to your comments. Thank you very much!

Project directory

The project catalog is roughly as follows:

. ├ ─ ─ the README. Md / / project documents ├ ─ ─ app / / front end source folder │ ├ ─ ─ the components / / front end components folder │ ├ ─ ─ configureStore. Js/store/configuration file │ ├ ─ ─ Containers / / front-end container components folder │ ├ ─ ─ the fetch / / encapsulating the get/post requests folders │ ├ ─ ─ index. The js/APP/output file │ ├ ─ ─ lib/store/third party introduced file folder │ ├ ─ ─ reducers //reducer Include actions, actionTypes │ └ ─ ─ sagas / / saga folders, asynchronous action processing ├ ─ ─ the config │ └ ─ ─ config. Js / / total application configuration file ├ ─ ─ db / / storage database folder ├ ─ ─ Mongoose modules / / stored model folder │ └ ─ ─ the user. The js/store/user model file ├ ─ ─ package. The json ├ ─ ─ postcss. Config. Js / / postcss configuration file ├ ─ ─ Record / / folder where some records files ├ ─ ─ schemas / / mongoose schema folder │ └ ─ ─ the users. The js ├ ─ ─ server / / server side source folder │ ├ ─ ─ the API / / server side API interface folder │ ├ ─ ─ index. Js / / server startup file │ ├ ─ ─ for server js / / server file │ └ ─ ─ util. Js / / server side tools class file ├ ─ ─ │ static / / static resource managed folder └ ─ ─ the favicon. Ico ├ ─ ─ webpack. Dev. Webpack js / / development environment configuration file └ ─ ─ webpack. Prod. Js / / production environment webpack configuration fileCopy the code

Here is the react project structure. No need to say more about Component containers. Saga is used for all asynchronous action processing. Reducers stores all reducer, action and actionTypes corresponding to container.

Such as:

const initialState = {};

export const actionTypes = {
    HOME_LOAD:'HOME_LOAD',
};


export function reducer(state=initialState,action) {
    switch (action.type){
        default:
            return state;
    }
}

export const action = {
  getArticleList:function () {
      return actionTypes.HOME_LOAD
  }
};
Copy the code

For this kind of writing, please refer to my comments on the React project structure in the previous Dianping demo.

The state design

I have read an article about how to design state reasonably. I really benefited a lot after reading it. But… Oh, my god, it has to be like this

So, as a stupid person, I’m going to do a rough design for this demo.

The general design is as follows, and now (2017/09/28) part of the state structure has been completed as follows

Don’t worry guys, there will be a blog post on how to build it.

From this state tree, we can also know the configuration of the react stack and so on in the next article.

Project implementation steps series blog

  • React Stack + Express front and back end blog project (0) — warm up a wave
  • React Technology stack + Express Front and back end blog project (1) — overall project structure building, state state tree design
  • React Stack + Express Front-end blog project (2) — React-XXX front-end, routing configuration
  • React Stack + Express Front and back end blog project (3) – Back-end routing, proxy, static resource hosting and other configuration instructions
  • React Technology Stack + Express Front-end and back-end blog project (4) — blog homepage code writing and redux-Saga organization
  • React Technology Stack + Express Front and back end Blog Project (5) — The front and back end implements the login function
  • React Technology stack + Express Front and back end blog project (6) — Use session to achieve login free + management background permission verification
  • React Technology Stack + Express Front-end and back-end blog Project (7) — User view function of front-end management interface + corresponding back-end interface development
  • React Technology Stack + Express Front-end and back-end blog Project (8) — label management function of front-end management interface + corresponding back-end interface development
  • React Technology Stack + Express Front-end and back-end blog Project (9) — label management function of front-end management interface + corresponding back-end interface development
  • React Technology Stack + Express Front and back end blog Project (10) — Publish articles on the front management interface
  • React Stack + Express Front and back end blog project (11) — add, delete, change and check the corresponding article part of the backend interface
  • React Stack + Express Front and back end blog Project (12) — Front end for post part improvement (add, delete, change, check, pagination, etc.)
  • React Stack + Express Front and back end blog Project (13) — The front end for the improvement of the post part (add, delete, change, check, etc.)
  • React Stack + Express Front and back end blog project (14) — display of content details page and number of views
  • React Technology Stack + Express Front and back End Blog Project (15) — Add comment function and corresponding back end implementation for blog
  • React Stack + Express Front and back end blog project (16) — PM2 usage instructions
  • React Stack + Express Front and back End Blog Project (17) — Wrap up

Study and communication

Welcome to pay attention to personal wechat official account: Nealyang full stack front, get the first-hand article push and free full stack ebook sharing benefits