/udacity-react-redux-start

Quick start guide and understanding redux

Primary LanguageHTML

This project is a quick start guide about how to learn and understand Redux

This program targets:

1st: UI target of this project

This is the target UI of our project: UI target

These are the main functionalities:

Functionalities

  1. Add task to list (todo or goal)
  2. Mark task as completed (onlye todo)
  3. Delete task from list (todo or goal)

2nd: Deny task related to 'bitcoin' (checker middleware)

Identificates when any of the text inputed in the field contains the word 'bitcoin', does not registers it and shows a message. Don't let add anything with the word 'bitcoin'.

Checker Middleware

3rd: Generate console logs per action type (Logger middleware)

Logger Middleware

Redux -> Predictable

Predictable

Store / State tree

The store should have 4 parts:

  1. The state
  2. Get the state
  3. Listen to change on the state
  4. Update the state (dispatch function)

4 parts of Store

Action

Actions

Reducer

Pure Function

Take an state end reduce it to a new brand state

Pure Functions

Action Creator

Action Creators

Middleare (Redux)

The Redux docs describe middleware as:

Middleware Redux

Redux middleware properties

Redux Middleware Properties

Operations that a middleware can do before passing the action along to the reducer:

Middleware Redux Operations

How to use Redux middlewares:

const store = Redux.createStore( <reducer-function>, <middleware-functions> )

Redux Middlewares

Hight-Order Functions

Hight-Order Functions