Redux Quick Reference
Creating a store
A store is made from a reducer function, which takes the current state, and returns a new state depending on the action it was given.
import { createStore } from 'redux'
// Reducer
function counter (state = { value: 0 }, action) {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
case 'DECREMENT':
return { value: state.value - 1 }
default:
return state
}
}
let store = createStore(counter)
// Optional - you can pass `initialState` as a second arg
let store = createStore(counter, { value: 0 })
onMessageClick('hello')}>
{message}
)
}
// Maps `state` to `props`:
// These will be added as props to the component.
function mapState (state) {
return { message: state.message }
}
// Maps `dispatch` to `props`:
function mapDispatch (dispatch) {
return {
onMessageClick (message) {
dispatch({ type: 'click', message })
}
}
}
// Connect them:
export default connect(mapState, mapDispatch)(App)
```
## Combining reducers
Combines multiple reducers into one reducer function.
```js
const reducer = combineReducers({
counter, user, store
})
```
## Signature
Middlewares are simply decorators for `dispatch()` to allows to take different kinds of actions, and to perform different tasks when receiving actions.
```js
// noop middleware
const logger = store => dispatch => action { dispatch(action) }
const logger = store => {
// This function runs on createStore().
// It returns a decorator for dispatch().
return dispatch => {
// Runs on createStore(), too.
// It returns a new dispatch() function
return action => {
// Runs on every dispatch()
}
}
}
```
## Applying middleware
```js
const enhancer = applyMiddleware(logger, thunk, ...)
const store = createStore(reducer, {}, enhancer)
```