> For the complete documentation index, see [llms.txt](https://rangle-io.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rangle-io.gitbook.io/react-training/master/lessons/redux-hello.md).
# redux-hello
## Start With Something Simple
* Build a single-page example that increments and decrements a counter
* Has all of the key elements of a real React/Redux application
* Load libraries from the web to keep things simple
## Page Outline
```markup
Simplified Example
```
* Using Babel to translate JSX and ES6 into whatever the browser needs
## State
```javascript
const INITIAL_STATE = 0
```
* Doesn't get much simpler than that
## Actions
```javascript
const INCREASE = 'INCREASE'
const DECREASE = 'DECREASE'
function increase() {
return { type: INCREASE }
}
function decrease() {
return { type: DECREASE }
}
```
* Symbolic names instead of raw strings
## Reducer
```javascript
function counterReducer(state = INITIAL_STATE, action = {}) {
switch (action.type) {
case INCREASE:
return state + 1
case DECREASE:
return state - 1
default:
return state
}
}
```
* State will be initialized on the first call by default value of `state`
* Return a new state depending on the action type
* If no action provided, `action.type` is `undefined`
## Connect to Redux
```javascript
let { createStore, combineReducers } = Redux
const rootReducer = combineReducers({ counter: counterReducer })
const store = createStore(rootReducer)
```
* `combineReducers` lets us build reducers separately for different parts of the application
* Our application's actual state is an object with `counter` as its only key
* `createStore` then creates a store that passes actions through reducers
## Handling Changes
```javascript
store.subscribe(() => {
ReactDOM.render(
{ JSON.stringify(store.getState(), null, 2) }
,
document.getElementById('root')
)
})
```
* The store is an observable
* Every time state changes, it calls our (anonymous) callback...
* ...which does a React render
* Display the entire state using `JSON.stringify` with 2-level indentation
* Buttons that dispatch actions
* `store.dispatch` means "handle this action"
* Actions themselves are created by our utility functions
## Start Things Off
```javascript
store.dispatch({ type: 'INIT' })
```
* A pre-defined action that triggers the initial rendering
## Patterns
* Some of these steps are the same for every Redux application
* We will introduce tools that automate them