/redux-form-exercise

Exercises to understand better redux-form, how it works and how to use it.

Primary LanguageJavaScript

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.

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

Install

To clone the project on your machine, install the required dependencies and run the server, follow these commands:

$ 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

It looks like this:

alt Extension image

And it will help you a lot to debug and understand what's going with your code.

Redux (Reminder)

with images

alt Redux image

Source https://www.reddit.com/r/webdev/comments/4r1947/i_am_working_on_a_reactredux_video_tutorial/

alt Redux image

Source http://staltz.com/unidirectional-user-interface-architectures.html

alt Redux image

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