react + redux framework project build process

First, Scaffolding react directory structure:

1、npm install -g create-react-app   全局安装react脚手架
2、create-react-app react-demo        创建react-demo项目
3、cd react-demo      进入到项目文件夹
4、npm start              启动本地项目

 

Second, in combination with Reset.css Styled-Components used.

Styled-Components css stylesheets can not solve private problems, Reset.css reset the default settings for different browser tabs

 

Three, React-Redux manage application data

Some components of the data, do you think that only the component use, but as the project continues to expand, maybe also with other components, this time, since we use the React-Redux management data, is to get all the data to its management

React-Redux Redux and the two packages are used in combination, there React-Redux Provider core components, this note

 

Four, combineReducers to complete the split data management

The larger the project, the more reducer.js code, so when you build the project must first be split processing

 

Five, actionCreators split with the constants of

Create action objects, acitonType constants must be written in a single file to manage

 

Sixth, the use Immutable.js to manage data in the store

Immutable object data modification, each will automatically create a new Immutable objects, to solve the problem with the Immutable store in the state mistakenly modified.

 

Seven, redux-immutable unified data format

In the fourth step, merging with combineReducers reducer to split the total reducer, in which case the state is not returned reducer immutate objects can cause data formats are not unified, the original will combineReducers

redux package is introduced, the introduction can be replaced by a redux-immutable.