Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rogic89/ToDo-react-redux-immutable
ToDo app showing best practices using React, Redux and ImmutableJS
https://github.com/rogic89/ToDo-react-redux-immutable
Last synced: 22 days ago
JSON representation
ToDo app showing best practices using React, Redux and ImmutableJS
- Host: GitHub
- URL: https://github.com/rogic89/ToDo-react-redux-immutable
- Owner: rogic89
- Created: 2016-01-28T20:06:41.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-24T18:58:08.000Z (almost 8 years ago)
- Last Synced: 2024-08-04T10:01:10.396Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 76.2 KB
- Stars: 178
- Watchers: 8
- Forks: 49
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-todos - React+Redux+ImmutableJS
README
Tips, trick and best practices using React, Redux and ImmutableJS
=======================
Check the article explaining the logic -> [https://www.toptal.com/react/react-redux-and-immutablejs](https://www.toptal.com/react/react-redux-and-immutablejs)
ToDo App shows how to use Redux and ImmutableJS to avoid needless re-rendering of React components.
Console Logs are conveniently placed on key points to clearly show absolute minimal DOM re-render.
Usage
-----
#### `npm install`
Install Node modules listed in ./package.json`
#### `npm start`
Runs the webpack build system with HMR. Webpack dev server can be found at `localhost:3000`.
Structure
---------
```
.
├── bin # Build/Start scripts
├── build # All build-related configuration
│ ├── webpack # Environment-specific configuration files for Webpack
├── config # Project configuration settings
└── src # App source code
├── actions # Redux actions
├── components # Generic React Components
├── constants # Constants for Redux actions
├── reducers # Redux reducers (all are imported in index.js)
├── styles # App SASS styles, all are imported into app.scss
├── utils # Reusable utility functions
├── index.html # Most basic index.html
└── init.js # App bootstrap and rendering
```