cheatsheets/redux.md

title	category
Redux	React

Stores

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;
  }
}

let store = createStore(counter);

store.subscribe(() => { ... })
store.dispatch({ action })
store.getState()
store.dispatch({ type: 'INCREMENT' }); // 1 
store.dispatch({ type: 'DECREMENT' }); // 10

React Redux

React.render(
  <Provider store={store}>
    <App />
  </Provider>, mountNode)

class App extends React.Component {
  render () {
    return
      <div onClick={() => this.props.onMessageClick('hello')}>
        {this.props.message}
    </div>
  }
}

function mapStateToProps (state) {
  return { message: state.message }
}

function mapDispatchToProps (dispatch) {
  return {
    onMessageClick (message) {
      dispatch({ type: 'click', message })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Middleware

// 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

const store = createStore(reducer, {}, applyMiddleware(logger, thunk, ...))

Reference

• Redux
• React-redux
• Usage with React