---
title: Redux
category: React
---
### Stores
```js
import { createStore } from 'redux';
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
```
```js
let store = createStore(counter);
store.subscribe(() => { ... })
store.dispatch({ action })
store.getState()
store.dispatch({ type: 'INCREMENT' }); // 1
store.dispatch({ type: 'DECREMENT' }); // 10
```
### React Redux
```js
React.render(
, mountNode)
```
```js
class App extends React.Component {
render () {
return
this.props.onMessageClick('hello')}>
{this.props.message}
}
}
function mapStateToProps (state) {
return { message: state.message }
}
function mapDispatchToProps (dispatch) {
return {
onMessageClick (message) {
dispatch({ type: 'click', message })
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
```
## Middleware
```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 store = createStore(reducer, {}, applyMiddleware(logger, thunk, ...))
```
## Reference
* [Redux](https://www.npmjs.com/package/redux)
* [React-redux](https://www.npmjs.com/package/react-redux)
* [Usage with React](http://rackt.github.io/redux/docs/basics/UsageWithReact.html)