Один из трендов в разработке приложений на JavaScript - разделение состояния и отображения. В докладе речь пойдет о том, как мы применили для этих целей библиотеку Redux. Расскажу, больно ли ломать мозг новым подходом (спойлер: да), обязательно ли писать все на React (спойлер: нет), стало ли легче разрабатывать и тестировать (спойлер: вы не поверите).

1. Роман Сальников, 2ГИС
@Bardty, roman@bardt.me
УПРАВЛЕНИЕ СОСТОЯНИЕМ В
REDUX

2. jQuery

3. MVC

4. MVC в реальности

5. Flux

6. Redux

7. const store = createStore(mainReducer);
store.dispatch(goToSlide(5));
store.dispatch(nextSlide());
store.dispatch(nextSlide());
store.getState(); // { slide: 7 }

8. Flux
N stores
Dispatcher
Events
Redux
1 store
Store
Store

10. (state, action) => state

11. Reducer – чистая функция
const defaultState = {
slide: 0
};
const mainReducer = (state = defaultState, action) => {
switch (action.type) {
case "NEXT_SLIDE":
return {
slide: state.slide + 1
};
case "PREV_SLIDE":
return {
slide: state.slide - 1
};
case "GO_TO_SLIDE":
return {
slide: action.slide
};
default:
return state;
}
};

12. Как сделать роутинг?
Как делать асинхронные запросы?
А как...

13. Никак

14. Redux with
middlewares

15. Async actions
export default function thunkMiddleware({ dispatch, getState }) {
return next => action =>
typeof action === 'function' ?
action(dispatch, getState) :
next(action);
}
const fetchData = (dispatch) => {
dispatch(fetchStart());
API.fetch('/data')
.then((data) => {
dispatch(fetchSuccess(data));
})
.catch((error) => {
dispatch(fetchFail(error))
});
}

16. Общая идея
Один Store
State – простой объект
State не меняется, на каждом шаге – новый
Все изменения через Reducer – чистые функции
Расширение через Middleware

17. Практика

18. Restore state
const store = createStore(mainReducer, {
slide: 5
});
store.dispatch(nextSlide());
store.dispatch(nextSlide());
store.getState(); // { slide: 7 }

19. Unit testing
// somewhere in code
const nextSlide = () => {
return {
type: "NEXT_SLIDE"
};
};
// test
const initialState = {
slide: 5
};
const actual = mainReducer(initialState, nextSlide());
const expected = {
slide: 6
};
expect(actual).toEqual(expected);

20. Integration testing
const initialState = {
slide: 5
};
const store = createStore(mainReducer, initialState);
store.dispatch(nextSlide());
store.dispatch(goToSlide(9))
store.dispatch(nextSlide());
const actual = store.getState();
const expected = {
slide: 10
};
expect(actual).toEqual(expected);

21. Минусы (из практики)
Сложно построить схему состояния
Сложно работать с большим состоянием
Не весь state удается держать в store
"Аналоговые" события

22. Домашнее задание
Выступление Дэна Абрамова на React Europe
Официальная документация очень крутая
awesome-redux
Видео-курс на egghead.io от автора

23. Роман Сальников, 2ГИС
@Bardty, roman@bardt.me
СПАСИБО!