The document introduces Redux as a state management solution for ReactJS, emphasizing its core principles such as a single source of truth and unidirectional data flow. It discusses the structure of a Redux application including actions, reducers, and the store, and highlights the benefits of using Redux such as improved debug capabilities and community support. Additionally, it covers practical examples of implementing Redux with tasks management and middleware integration.

1. Intro to
Redux.
Marcin Śpiewak, Marek Mitis

2. Is ReactJS state enough?
componentDidMount(){
this.state = {
prop1: 'value',
prop2: 'value',
};
}

3. Props, props everywhere.
Root Application Component
Search Input Component Result List Component
Item
Component
Item
Component
Item
Component

4. Props, props everywhere.
Root Application Component
Search Input Component Result List Component
Item
Component
Item
Component
Item
Component

5. Props, props everywhere.
Root Application Component
Search Input Component Result List Component
Item
Component
Item
Component
Item
Component

6. Props, props everywhere.
Root Application Component
Search Input Component Result List Component
Item
Component
Item
Component
Item
Component

7. Redux to the rescue?

8. Three main Redux principles
➔ Single source of thruth
➔ State of the app is read-only
➔ Changes are made with pure functions

9. Redux structure
Action
View
Component
Reducer Store

10. Redux structure
Action
View
Component
Reducer Store
dispatch(action)

11. Redux structure
Action
View
Component
Reducer Store
dispatch(action)
Middlewares

12. Redux structure
Action
View
Component
Reducer Store
dispatch(action) updates(reducer)
Middlewares

13. Redux structure
Action
View
Component
Reducer Store
dispatch(action) updates(reducer)
render(state)
Middlewares

14. Some more details
➔ Unidirectional flow (forget „two-way” binding).
➔ Based on Flux concept.
➔ Easy injectable into any ReactJS project.
➔ 99 lines of code.
➔ Keep it flat.

15. Differences with Flux
➔ Only one store
➔ Dispatcher replaced with reducers

16. „Old school”
Root Application Component
Search Input
Component
Result List Component
Item
Component
Item
Component
Item
Component

17. Redux driven architecture
Root Application Component
Search Input
Component
Result List Component
Item
Component
Item
Component
Item
Component
Redux
Store

18. Pros of React & Redux stack
➔ Awesome debug & testability
➔ Strong community & support
➔ Cross-platform architecture
➔ It’s Immutable(JS)!

19. Actions
export function addNewTask (task) {
return {
type : 'NEW_TASK_ADD', // name of the action
payload : task // data sent as 'payload'
}
}

20. Actions
export function addNewTask (task) {
return {
type : 'NEW_TASK_ADD', // name of the action
payload : task // data sent as 'payload'
}
}

21. Actions
export function addNewTask (task) {
return {
type : 'NEW_TASK_ADD', // name of the action
payload : task // data sent as 'payload'
}
}

22. Reducer
export default function reducer(state = { tasks : []}, action) {
switch (action.type) {
case 'NEW_TASK_ADD':
return { tasks : [...state.tasks, action.payload] }
default:
return state;
}
}

23. Reducer
export default function reducer(state = { tasks : []}, action) {
switch (action.type) {
case 'NEW_TASK_ADD':
return { tasks : [...state.tasks, action.payload] }
default:
return state;
}
}

24. Reducer
export default function reducer(state = { tasks : []}, action) {
switch (action.type) {
case 'NEW_TASK_ADD':
return { tasks : [...state.tasks, action.payload] }
default:
return state;
}
}

25. Reducer
export default function reducer(state = { tasks : []}, action) {
switch (action.type) {
case 'NEW_TASK_ADD':
return { tasks : [...state.tasks, action.payload] }
default:
return state;
}
}

26. Store
import { combineReducers, createStore } from 'redux';
import reducer from './reducers/index';
const allReducers = combineReducers({
tasks : reducer
});
let store = createStore(allReducers);

27. Store
import { combineReducers, createStore } from 'redux';
import reducer from './reducers/index';
const allReducers = combineReducers({
tasks : reducer
});
let store = createStore(allReducers);

28. Store
import { combineReducers, createStore } from 'redux';
import reducer from './reducers/index';
const allReducers = combineReducers({
tasks : reducer
});
let store = createStore(allReducers);

29. Store base functions
// subscribing
store.subscribe(function(){
/* .. something changed in store */
});
// dispatching
store.dispatch(action);

30. That powerful Middlewares
const consoleReporter = store => next => action => {
console.log("Dispatched action: ", action)
return next(action)
}

31. That powerful Middlewares
const consoleReporter = store => next => action => {
console.log("Dispatched action: ", action)
return next(action)
}

32. That powerful Middlewares
const consoleReporter = store => next => action => {
console.log("Dispatched action: ", action)
return next(action)
}

33. The best of middlewares
➔ Thunk
➔ Logger
➔ DevTools

34. Bind React with Redux (part I)
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<AppViewContainer />
</Provider>,
document.getElementById('root')
);

35. Bind React with Redux (part II)
import addNewTask from './actionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { tasks: state.tasks }
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators( { addNewTask }, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(AppComponent)

36. How to debug Redux flow?

37. Chrome plugin: ReduxDevTools.

38. Livecoding
„React-Redux”

39. Let’s replace Redux with our own
implementation

40. Thank you for the workshop :)

41. We need your feedback !