What is Redux and how it can make your (React application development) life easier.

1. A predictable state container for JavaScript apps

2. A predictable
state container
for JavaScript
apps
● Behaves consistently
● Runs in different
environment
○ Client
○ Server
○ Native
● Easy to test

3. A predictable
state container
for JavaScript
apps
● Can be used with
○ React
○ Angular
○ Any other view library
● Developer friendly
○ Live code editing
○ Time travelling debugger

4. Why Redux?

5. SPA is Complex
● States
● Mutation
● Asynchronicity
● Data flow

6. Redux has a solution
● State
● Action
● Reducer

7. “You might NOT
need Redux”

9. State
type State = any
{
"visibilityFilter": "SHOW_ALL",
"tweets": [
{
"id": 0,
"text": "Hello World!!!",
"category": "text",
"isFavorite": false
}, …
]
}

10. Action
type Action = Object
{
"type": "ADD_TWEET",
"text": "Hello World!!!"
"category": "text"
}
Actions must have a type property that indicates
the type of action

11. Reducer
type Reducer = Function
(oldState, action) => newState
function addTweet(state = [], action) {
var tweets = state.slice();
tweets.push({
"id": state.length,
"text": action.text,
"category": action.category
"isFavorite": false
});
return tweets;
}
Do not put API calls into reducers

12. 3 Principles
of Redux
1. Single source of truth
2. State is read-only
3. Changes are made with pure
function (reducers)

13. Redux Lifecycle

14. Basic
JS
Example

15. React.JS

16. React.JS
Glossaries
● Props
● State
● Container Component
● Presentation Component

18. Props Name
Profile Photo
Text
Favorite Count

19. State isFavorite: false;
isFavorite: true;

20. Container Component
{
name: Donald J. Trump
image: ../image.png
text: Hello World!!!
isFavorite: false
...
}

21. Presentation Component

22. Redux APIs
● createStore()
● mapStateToProps(state)
● mapDispatchToProps(dispatch)
● connect()
● combineReducers({})

23. React
Example
with
Unit Tests

24. Resources
● Code Examples
● Redux.js
● Glossary
● API Reference
● Getting Started with Redux
● Building React Applications with
Idiomatic Redux

25. THANKS