Intro to Redux

1. Redux Like Us
August 2018
Heber Silva

2. Redux
What’s Redux?
Is a predictable state management container library for JavaScript
apps. Itself is a small library of 2KB. It was release in June 2, 2015
by Dan Abramov.
What is a state?
Is a data that React component holds to render to the
user.
Before understand what is Redux need
to understand what’s a state…

3. Redux keep tracks of small things (states) in JavaScript
3

4. What does the Redux solve?
Even a silly to-do list could become
unmanageable if you starting passing the state
up and down.
Examples of state
• Data the user sees
• Data we fetch
• URL we are showing to the user
• Selected items inside the page
• Errors messages in the applications
Unmanageable states…

5. Things will become tricky…
5
“Without
Redux your
React app
passes state
up and down
the tree
nodes…”
“With Redux
your React app
dispatches
updates to
states to a
single tree
node…”

6. When to use Redux?
• Multiple React components needs to access the same state but do not
have any parent/child relationship
• You start to feel awkward passing down the state to multiple
components with props

7. How all parts go together?
7
Store
Orchestrates all the moving pats in Redux. The state of the whole lives inside the store.
Reducer
A JavaScript function that takes two arguments, current state and an action. The state must
return entirely from reducers. Then data state are never mutated, that only copied.
Action
Sends out signal to the store to change the state called dispatching an action.
Container
When you connect your component to Redux, you connect with two arguments based use cases.
• mapStateToProps – Connect parts of the Redux state to the props of a React Component.
So, your component can have exact part of the store it needs.
• mapDispatchToProps – Connects Redux actions to React props. This way your component
will be able to dispatch actions.

8. Store
8
// src/js/store/index.js
import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(rootReducer);
export default store;
Store methods
• getState for accessing the current state of the application
• dispatch for dispatching an action
• subscribe for listening on state changes
Code:

9. 9
Reducer
import { ADD_BANANA } from "../constants/action-types";
const initialState = {
banana: []
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_BANANA:
return { ...state , banana: action.banana };
default:
return state;
}
};
export default rootReducer;
Code:

10. 10
Action
// src/js/actions/index.js
import { ADD_BANANA } from "../constants/action-types";
export const addBanana = banana => ({ type: ADD_BANANA,
payload: banana });
Code:

11. 11
Container
Code:
const mapStateToProps = state => {
return { ingredient: state.ingredient };
};
const mapDispatchToProps = dispatch => {
return {
addIncredient: ingredient => dispatch(addIngredient(ingredient))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Component)
import { connect } from "react-redux";

12. Redux Flow
12

13. Live Human Component
13
<LiveHumanComponent />

14. Live Code
14
<LiveCode />