Redux-Thunk Radoslav Stankov 26/07/2016 

Radoslav Stankov @rstankov http://rstankov.com http://github.com/rstankov 

No content

No content

Reducer Action React View Store 

Reducer Action React View New Store 

No content

class Filters extends React.Component { filterHander(filterName) { return () => { this.props.dispatch(changeFilter(filterName)); }; } render() { return ( ); } } 

function changeFilter(filterName) { dispatch({ type: 'TODO/CHANGE_FILTER', filter: filter }); } 

No content

No content

No content

class Filters extends React.Component { filterHander(filterName) { return async () => { this.props.dispatch(changeFilter(filterName)); const todos = await this.props.api.loadTodos({filter: filter}); this.props.dispatch(setTodos(todos)); }; } render() { return ( ); } } 

No content

redux-thunk https://github.com/gaearon/redux-thunk 

function action() { return { type: ACTION }; } redux-thunk 

function action() { return async (dispatch, getState) => { // do ... async stuff dispatch({ type: ACTION_1 }); // do ... async stuff dispatch({ type: ACTION_2 }); // ...so on }; } redux-thunk 

import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import reducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk)); 

function changeFilter(filterName, api) { return async function(dispatch, getState) { if (getState().filter == filter) { return; } dispatch({ type: 'TODO/LOAD', filter: filter }); const todos = await api.loadTodos({filter: filter}); dispatch({ type: 'TODO/LOADED', todos: todos }); }; } 

this.props.filterChange(filterName, this.props.api); 

function changeFilter(filterName, api) { return async function(dispatch, getState) { if (getState().filter == filter) { return; } dispatch({ type: 'TODO/LOAD', filter: filter }); const todos = await api.loadTodos({filter: filter}); dispatch({ type: 'TODO/LOADED', todos: todos }); }; } 

import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import reducer from './reducers'; import apiClient from './utils/apiClient'; const api = apiClient(); const store = createStore(rootReducer, applyMiddleware(thunk.withExtraArgument(api)); 

function changeFilter(filterName, api) { return async function(dispatch, getState) { if (getState().filter == filter) { return; } dispatch({ type: 'TODO/LOAD', filter: filter }); const todos = await api.loadTodos({filter: filter}); dispatch({ type: 'TODO/LOADED', todos: todos }); }; } 

function changeFilter(filterName) { return async function(dispatch, getState, api) { if (getState().filter == filter) { return; } dispatch({ type: 'TODO/LOAD', filter: filter }); const todos = await api.loadTodos({filter: filter}); dispatch({ type: 'TODO/LOADED', todos: todos }); }; } 

class Filters extends React.Component { filterHander(filterName) { return () => { this.props.dispatch(changeFilter(filterName)); }; } render() { return ( ); } } 

import createStore from 'tests/support/createStore'; import factory from 'tests/support/factory'; describe(changeFilter.name, () => { it('loads todos', () => { const store = createStore({ filter: 'all' }); const todo = factory.todo(); store.api.stub('loadTodos', [todo]); store.dispatch(changeFilter('completed')); expect(store.getState().filter).to.equal('completed'); expect(store.getState().todos).to.deep.equal([todo]); }); it('does not reload todos when filter is not changing', () => { const store = createStore({ filter: 'all' }); const todo = factory.todo(); store.api.stub('loadTodos', [todo]); store.dispatch(changeFilter('all')); expect(store.getState().todos).to.deep.equal([]); }); }); 

No content

redux-saga https://github.com/yelouafi/redux-saga 

redux-saga export default function changeFilter(filter) { return { type: 'TODO/SET_FILTER', filter: filter }; } 

redux-saga import { takeEvery } from 'redux-saga'; import { put } from 'redux-saga/effects'; function* loadFilter(action) { yield put({ type: 'TODO/LOADING' }); const todos = yield api.loadTodos({filter: action.filter}); yield put({ type: 'TODO/LOADED', todos: todos }); } export function* saga() { yield* takeEvery('TODO/SET_FILTER', loadFilter); } 

redux-saga import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import reducer from './reducers'; import saga from './actions/changeFilter'; const sagaMiddleware = createSagaMiddleware(); const store = createStore(reducer, applyMiddleware(sagaMiddleware)); sagaMiddleware.run(saga); 

https://speakerdeck.com/rstankov/redux-thunk 

No content

@rstankov Thanks :)