Redux is a state container for JavaScript apps. It is most commonly paired with React, where it takes control of state away from React components and gives it to a centralised place called a ‘store’.

This is where a change is triggered. For example, a user clicking a ‘ ’ button in a simple counter app.

The actual action we want to take place, for example, “increment”.

In Redux, actions are plain JavaScript objects, and they must have a type property (e.g. 'INC','DEC' ).

These specify how the application’s state should change in response to each action. For example, our new state should be one integer higher than our old state. (It is reducers which give Redux its name — they share the same Latin root).

The store brings everything together. It holds application state, and it is where you will find three critical methods:

getState() or useSelector — which allows access to the state object dispatch(action) — which allows state to be updated subscribe(listener) — which registers listeners, allowing code to trigger every time a change takes place

Sections of code that have to be included in many places with little or no alteration. One of the reasons Redux can seem tricky to beginners is because it contains more boilerplate than you’re likely used to for front-end development.

The conventional name used for the property that holds the actual data in a Redux action object. A payload isn’t necessary, but it’s fairly common to see actions defined like this:

npm i redux react-redux