https://github.com/fed/redux-example
Building a simple counter example to illustrate how Redux works
https://github.com/fed/redux-example
Last synced: 8 months ago
JSON representation
Building a simple counter example to illustrate how Redux works
- Host: GitHub
- URL: https://github.com/fed/redux-example
- Owner: fed
- Created: 2016-07-30T06:36:54.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-10-23T09:57:39.000Z (over 9 years ago)
- Last Synced: 2025-03-12T03:43:07.839Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Redux Example
We know that React is just for views (often referred to as the `V` in `MVC`). The obvious question then is, where do I put all my state and logic?
You may already be aware of [Flux](https://facebook.github.io/flux/), which is a style / pattern / architecture for designing web applications. There are several frameworks out there that implement the ideas of Flux, one of them being [Redux](http://redux.js.org/).
Here's a very brief description of how Redux works:
1. **Components** are given callback functions as props, which they call when a **UI event** happens.
2. Those callbacks **create and dispatch actions** based on the event.
3. **Reducers** process the actions, computing the new state.
4. The new **state** of the whole application goes into a **single store**.
5. **Components** receive the new state as props and **re-render themselves *where needed***.
Most of the above concepts are not unique to Redux, but Redux implements them in a very clean and simple way, with a [tiny API](http://redux.js.org/docs/api/index.html).
## Development Tasks
| Command | Description |
|---------|-------------|
| `npm install` | Fetch dependencies and build binaries for any of the modules |
| `npm start` | Fire up Webpack Dev Server, app will go live on `http://localhost:6789` |
| `npm run clean` | Remove `build` directory |
| `npm run build` | Build `bundle.js` file |
| `npm test` | Run test suite |