Redux is a JavaScript library that implements state container of the Flux-based architecture.
Redux can be described in three fundamental principles:
Main parts:
Redux is astonishingly simple. It uses a function called a reducer (a name derived from the JavaScript reduce method) that takes two parameters: An action, and a next state.
The reducer has access to the current (soon to be previous) state, applies the given action to that state, and returns the desired next state.
Reducers are designed to be pure functions; meaning, they produce no side effects. If you pass the same input values to a reducer 100 times, you will get the exact same output value 100 times. Nothing weird happens. They are completely predictable. As someone with a prominent "NO SURPRISES" sticky note on my monitor, this is a wonderful idea to contemplate.
Reducers do not store state, and they do NOT mutate state. They are passed state, and they return state. This is what reducers look like in action. http://redux.js.org/docs/basics/Reducers.html
Reference: http://redux.js.org/docs/introduction/Motivation.html
If you're not using bundlers like Webpack and Browserify, change the first line to:
const { createStore } = Redux;
Or just call it directly from the Redux global when creating the store:
const store = Redux.createStore(counter);
Reducers change the application state based on the actions fired.
The state is immutable, that means reducers should be pure: for the same input, you should always get the same output. Because of this, mutability is forbidden in reducers.