Wprowadzenie do architektury Flux i konceptu Redux’a. Ukazane w praktyce plusy i minusy użycia z ReactJS, AngularJS i Angular 2 z zaprezentowaniem kodu aplikacji.

1. Road trip with Redux
Damian Kmiecik
3rd of April 2017, Warsaw

2. Agenda
1. Flux
2. Redux
3. Code!
4. Pros and cons
5. Redux DevTools
6. Alternatives
7. Links

3. 1. Flux

4. Data Flow
Flux
[1]

5. Data Flow
Flux
[1]

6. Data Flow
Flux
Action as reaction on user interaction
[1]

7. Flux
Action
1. Trigger a dispatch to the
stores
2. Including payload of data

8. Flux
Dispacher
1. Central hub that manages all
data flow in the application.
2. Distributing the actions to the
stores

9. Flux
1. Contain the application state
and logic
2. Manage the state of many
objects
Store

10. Flux
View
1. Listen for events that are
broadcast by the stores
2. Requests the new data via to
stores’
3. Set received data to its own
state
4. Render view

11. 2. Redux

12. Sounds familiar?
Redux

13. Redux vs Flux
Redux
[2]

14. Redux
Action
1. Action creator returns actions
2. Doesn’t dispatch actions

15. Redux
Reducer
1. Pure functions
2. Returns new state to the Store
from combination of state and
action

16. Redux
1. One single immutable State
2. Contains the application
State
Store

17. 3. Code!

18. Yeah!
Code!

19. Redux
React
export function setRepoState (st) {
return {
type: constants.SET_REPO_STATE,
payload: {
state: st
}
}
}

20. Redux
React
const initialState = Immutable.Map()
export default function repo
(state = initialState, action) {
if (!action.payload || !action.type)
return state
switch (action.type) {
case constants.SET_REPO_STATE:
let newState = Object.assign
(new Immutable.Map, state)
return newState.set
('status, action.payload.state)
default:
return state
}
}

21. Redux
React
const router = routerMiddleware(hashHistory)
const enhancer =
applyMiddleware(thunk, router)
const rootReducer = combineReducers({
repo,
routing
})
export default function configureStore
(initialState) {
return createStore(
rootReducer,
initialState,
composeWithDevTools(enhancer)
)
}

22. Redux
React
const store = configureStore()
const history =
syncHistoryWithStore(hashHistory, store)
render(
<Provider store={store}>
<Router history={history}
routes={routes} />
</Provider>,
document.getElementById('app')
)

23. Redux
React
//Container
@connect(state => ({
repository: state.repo
}))
render () {
const { dispatch } = this.props
const actions =
bindActionCreators(repository, dispatch)
}

24. Redux
Angular JS
The same as in the React app 

25. Redux
Angular JS
//App Main Module
let app = angular.module('app', [
ngRedux,
uiRouter
])
.value('repoActions', repoActions)
.config(routerConfig)
.config(
['$ngReduxProvider',
$ngReduxProvider => {
$ngReduxProvider
.createStoreWith(rootReducer,
[thunk, createLogger()])
}])

26. Redux
AngularJS
//Container
const disconnect =
$ngRedux.connect(
state => ({
repo: state.repo
}),
repoActions)
((state, actions) => {
this.actions = actions
})
$scope.$on('$destroy', disconnect)
$ngRedux.subscribe(() => {
this.repoStatus = $ngRedux.getState()
.repo.get('status')
})

27. Redux
Angular 2
The same as in the React and AngularJS app 

28. Redux
Angular 2
export interface IAppState {
todo?: ITodoState;
}
export const rootReducer =
combineReducers<IAppState>({
todo: todoReducer,
router: routerReducer
});

29. Redux
Angular 2
//App Main Module
middleware.push(
createEpicMiddleware<Action>(
combineEpics.combine()));
this.ngRedux.configureStore(
rootReducer,
{ },
middleware,
[devTool.isEnabled() ?
devTool.enhancer() : f => f]
);
ngReduxRouter.initialize();

30. Redux
Angular 2
//Container
@Component({
selector: 'gp-repo-list-container',
template: `
<gp-repo-list [repoList]="repoList |
async"></gp-repo-list>
`
})
export class RepoListContainer {
@select(state => state.repo)
public repoList: Observable<Object>;
}

31. 4. Pros and cons

32. Pros and cons
Pros:
1. Immutable state
2. Store contains whole state from the
application
3. Simply data flow
4. Total separation of data and presentation
5. Dumb components
6. Useful DevTools
Cons:
1. Not needed in all cases
2. Be aware of damages caused
by state mutations

33. 5. Redux DevTools

34. What?
Redux DevTools

35. 6. Alternatives

36. What should I choose? O,o
Alternatives
MobX
https://github.com/mobxjs/mobx
AltJS
http://alt.js.org/

37. 7. Links

38. Try it out!
Links
The SAM Pattern:
http://sam.js.org/
Flux:
https://facebook.github.io/flux/
Redux:
http://redux.js.org/
Redux DevTools:
https://github.com/gaearon/redux-devtools
Code:
https://github.com/dkmiecik/gp-react-redux
https://github.com/dkmiecik/gp-angular-redux
https://github.com/dkmiecik/gp-angular2-redux

39. Sources
Links
[1] https://facebook.github.io/flux/docs/in-depth-overview.html#content
[2] https://www.slideshare.net/JonasOhlsson/using-redux

40. Thank You 
damian.kmiecik.90@gmail.com
https://github.com/dkmiecik