React Redux Concepts

Redux is a tool for managing both data-state and UI-state in JavaScript applications.

Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen.

Core principals:

1. The state of your whole application is stored in an object tree within a single store.
2. The only way to change the state is to emit an action, an object describing what happened.
3. To specify how the state tree is transformed by actions, you write pure reducers. Reducers are just pure functions that take the previous state and an action, and return the next state. 

What React Solves:


Component to Component communication is hard in react, as data flows from top to bottom.

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. ... Flux pattern is one of the possible ways to arrange this.


React solves the above problem by introducing a global store. Components then "dispatch" state changes to the store, not directly to other components. The components that need to be aware of state changes can "subscribe" to the store:

npm install --save redux react-redux