https://github.com/springload/redux-form-exercise
Exercises to understand better redux-form, how it works and how to use it.
https://github.com/springload/redux-form-exercise
exercise learn learning-exercise react redux redux-form tutorial
Last synced: 10 months ago
JSON representation
Exercises to understand better redux-form, how it works and how to use it.
- Host: GitHub
- URL: https://github.com/springload/redux-form-exercise
- Owner: springload
- Created: 2017-02-02T01:15:22.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-24T05:31:35.000Z (over 8 years ago)
- Last Synced: 2025-02-01T06:25:38.559Z (12 months ago)
- Topics: exercise, learn, learning-exercise, react, redux, redux-form, tutorial
- Language: JavaScript
- Size: 429 KB
- Stars: 2
- Watchers: 17
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# redux-form-exercise
Exercises to understand better redux-form, how it works and how to use it.
**If you like this repo and/or learnt something from it, please give us a star :) Thanks!**
## Get started
### Prerequisites
This project uses [nvm](https://github.com/creationix/nvm).
You need to have it installed on your machine.
I highly recommend that you have a look (if you haven't already) to the [`redux-form` documentation](http://redux-form.com/6.5.0/docs/GettingStarted.md/)
### Install
To clone the project on your machine, install the required dependencies and run the server, follow these commands:
```sh
$ git clone git@github.com:springload/redux-form-exercise.git
$ cd redux-form-exercise
# Install the correct version of Node/NPM with nvm
$ nvm install
# Then, install all project dependencies.
$ npm install
# Then run the server
$ npm run start
# Open your browser to http://localhost:3000
```
### Debugging
I highly recommend that you install the [Redux extension for Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)
It looks like this:
And it will help you a lot to debug and understand what's going with your code.
## Redux (Reminder)
### with images
Source https://www.reddit.com/r/webdev/comments/4r1947/i_am_working_on_a_reactredux_video_tutorial/
Source http://staltz.com/unidirectional-user-interface-architectures.html
Source http://blog.tighten.co/react-101-using-redux
### with words
Don't be afraid by these images if you find them complicated.
Redux just needs to be tested and you will pick it up.
Basically, a Redux cycle works like this:
- A user clicks on a button on the UI (for instance)
- This button dispatches an action
- This action will be managed by a reducer which is listening for one or many actions
- This reducer will update the store state
- The new store is then passed to the component which rerenders with the new value