Scribd
Upload
24 views

React Redux

React-redux

Uploaded by

Govind Jha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

React Redux

React-redux

Uploaded by

Govind Jha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

React + Redux

Managing Your React App State with Redux


Keith Orlando
Agenda

1. What is Redux?
2. Why Redux?
3. Vocabulary
4. Principles
5. The Redux lifecycle
6. Workshop: catbook integration
7. Good practices
8. Resources
9. Homework
What is Redux?
Redux is a predictable state container for
JavaScript apps.
Why Redux?
GET /api/whoami

App
this.props.userId
Navbar Feed this.props.userId

NewStory Card this.props.userId

“Lift up state” to App.js


SingleStory CommentsBlock this.props.userId
and pass it down as props

SingleComment NewComment
Redux
erId Store
ps.us
.pro
s
thi rI
d
App e
.us
s
rop
p
is.
Navbar Feed th

this.props.userId
NewStory Card

“Lift up state” to the


SingleStory CommentsBlock
Redux Store

SingleComment NewComment
Redux Vocabulary
• Store: the global app state
• Actions: objects that describe “what happened”
• Reducers: functions that return the next state based on an action
• Dispatching: triggering a state update by sending an action
Redux Principles
1) Your app state (Redux store) is the
single source of truth.
2) Like in React, the state is read-only.
Never mutate your state directly.
3) State changes are made with pure functions
(no side effects).
E.g. Don’t make an API call inside of a reducer.
= Redux concept = React concept

Reducer Store
Create a new state

Dispatch the action


Subscribe to the store
(you choose what data is
Redux
available as props)
Lifecycle

Action Creator Component (View)


Create an action
Actions (objects)
describe what happened

{
type: string, REQUIRED

...,
}
additional data
Reducers (pure functions)
return the next state

current part of state dispatched action (an object)

function(state, action) {
switch (action.type) {
case UPDATE_USER_ID:
return Object.assign({}, state, {
userId: action.userId,
});
...
}
}
{
user: {
userId: string,
user: object,
}, Catbook
story: {
Redux Store
stories: [object],
},
}
Workshop: Integrating Redux into Catbook
If you plan on following along:

1. Control + C (quit) any currently running instances of catbook/react hot loader


2. Open a terminal window/tab and type:

$ cd ~ (or wherever you want to clone the project)


$ git clone https://github.com/korlando/catbook-redux
$ cd catbook-redux
$ npm install
$ npm start
$ (open the project in another terminal) npm run hotloader

3. Visit http://localhost:5000 in your browser


Redux Good Practices
(when not to use Redux?)

• Rule of thumb: put data in the Redux store when it’s shared between
two or more components.
• E.g. You probably don’t need to put the state of an input textbox in the redux store.

• Redux and React are not highly opinionated frameworks. Pick a


convention and stick to it for consistency.
• Applies to naming conventions
• Applies to making API calls (I prefer making an API call in componentDidMount and then
dispatching an action)
Additional Resources
• Redux Docs
https://redux.js.org
• The redux-workshop branch of my fork
$ git reset –hard
$ git fetch
$ git checkout redux-workshop
• Redux Sagas for advanced asynchronous handling
https://redux-saga.js.org
• Redux Sauce for quicker setup
https://github.com/jkeam/reduxsauce
Homework
Upgrade the rest of catbook to redux.
{
user: {
userId: string,
user: object,
},

story: {
stories: [object],
},
}
Thanks!
Keith Orlando
[email protected]

You might also like