Intro
What is Flux?
This is the optional architectural approach for building apps
What is Redux?
This is a predictable state container for JavaScript apps
MVC
Flux
Redux
Store
A store holds the whole state tree of your application.
The only way to change the state inside it is to dispatch an action on it
A store is not a class. It's just an object
To create a store, pass your root reducing function to createStore
Actions
Payloads of information that send data from your application to your store
They are the only source of information for the store
You send them to the store using store.dispatch()
Example
Action creator
Action creators are exactly that—functions that create actions. It's easy to conflate the terms “action” and “action creator”, so do your best to use the proper term.
Reducer
Specify how the application's state changes in response to actions sent to the store
Given the same arguments, it should calculate the next state and return it.
Example
Splitting reducers
Main principles
- Single source of truth
- State is read-only
- Changes are made with pure functions
Pure functions and Immutability
A pure function is a function which:
- Given the same input, will always return the same output.
- Produces no side effects.
A dead giveaway that a function is impure is if it makes sense to call it without using its return value. For pure functions, that’s a noop.
Impure examples
Pure examples
Middleware
A middleware is a higher-order function that composes a dispatch function to return a new dispatch function. It often turns async actions into actions.
Middleware is composable using function composition. It is useful for logging actions, performing side effects like routing, or turning an asynchronous API call into a series of synchronous actions.
There can be several middleware entities, each performing its own useful role in an Application.
Middleware is a curried function which receives current store, next middleware in the chain, and current action They are connected during the creation of store:
Useful links