## Steps
###### The Redux Store
The center of every Redux application is the **store**.
A "store" is a container that holds your application's global **state**.
A store is a JavaScript object with a few special functions and abilities that make it different than a plain global object:
- You must never directly modify or change the state that is kept inside the Redux store
- Instead, the only way to cause an update to the state is to:
1. create a plain **action** object that describes "something that happened in the application"
2. **dispatch** the action to the store to tell it what happened.
- When an action is dispatched, the store runs the root **reducer** function, and lets it calculate the new state based on the old state and the action
- Finally, the store notifies **subscribers** that the state has been updated so the UI can be updated with the new data.
###### Define an initial state value for the app (Redux apps normally have a JS object as the root piece of the state, with other values inside that object.)
```js
const initialState = {
value: 0;
}
```
###### Define a reducer function that determines what the new state should be when something happens in the app. The reducer receives two arguments, the current `state` and an `action` object describing what happened
```js
function counterReducer(state = initialState, action) {
// Reducers usually look at the type of action that happened
// to decide how to update the state
switch (action.type) {
case 'counter/incremented':
return { ...state, value: state.value + 1 }
case 'counter/decremented':
return { ...state, value: state.value - 1 }
default:
// If the reducer doesn't care about this action type,
// return the existing state unchanged
return state
}
}
```
###### Create Redux store and pass it the reducer function
```js
const store = Redux.createStore(counterReducer);
```
###### Update the UI in response to user action(s)
When a user does something, the app will update its data and then redraw the UI with those values.
```js
// Our "user interface" is some text in a single HTML element
const valueEl = document.getElementById('value')
// Whenever the store state changes, update the UI by
// reading the latest store state and showing new data
function render() {
const state = store.getState()
valueEl.innerHTML = state.value.toString()
}
// Update the UI with the initial data
render()
// And subscribe to redraw whenever the data changes in the future
store.subscribe(render)
```
###### Dispatch action
Finally, we need to respond to user input by creating **action** objects that describe what happened, and **dispatching** them to the store. When we call `store.dispatch(action)`, the store runs the reducer, calculates the updated state, and runs the subscribers to update the UI.
```js
// Handle user inputs by "dispatching" action objects,
// which should describe "what happened" in the app
document.getElementById('increment').addEventListener('click', function () {
store.dispatch({ type: 'counter/incremented' });
});
document.getElementById('decrement').addEventListener('click', function () {
store.dispatch({ type: 'counter/decremented' })
});
document.getElementById('incrementIfOdd')
.addEventListener('click', function () {
// We can write logic to decide what to do based on the state
if (store.getState().value % 2 !== 0) {
store.dispatch({ type: 'counter/incremented' })
}
});
document.getElementById('incrementAsync')
.addEventListener('click', function () {
// We can also write async logic that interacts with the store
setTimeout(function () {
store.dispatch({ type: 'counter/incremented' })
}, 1000);
});
```
![[reduxDataFlowDiagram.gif]]
# Summary
- **Redux is a library for managing global application state**
- Redux is typically used with the React-Redux library for integrating Redux and React together
- Redux Toolkit is the recommended way to write Redux logic
- **Redux uses several types of code**
- _Actions_ are plain objects with a `type` field, and describe "what happened" in the app
- _Reducers_ are functions that calculate a new state value based on previous state + an action
- A Redux _store_ runs the root reducer whenever an action is _dispatched_
#### More info
[Some website](https://test.com)
___
**Tags**: #redux