Using Redux with React
0 likes246 views
The document discusses Redux, a predictable state container for JavaScript applications, which simplifies state management in complex apps. It provides an overview of Redux components, including actions, reducers, and store management, and introduces data fetching using middleware like Redux Thunk. Additionally, it offers resources for learning and implementing Redux with React.
![The need
Managing state in big applications is too complicated.
REDUX By Dan Jipa [dan.jipa@gmail.com]
There is no separation of concerns.
Simplified debugging.
! Single Source of Truth](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-2-320.jpg)
![Traditional communication between components
By Dan Jipa [dan.jipa@gmail.com]REDUX
1. Props
2. Callback functions
3. Event bubbling
4. Parent component
5. Observer pattern (publish,subscribe)
6. Global vars
1 2, 3 4 5, 6, 7
7. Context
Image: http://andrewhfarmer.com/component-communication/](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-3-320.jpg)
![Traditional data fetching
By Dan Jipa [dan.jipa@gmail.com]REDUX
1. Root component
2. Container component](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-4-320.jpg)
![By Dan Jipa [dan.jipa@gmail.com]
What do we need to start using Redux with React?
REDUX
Webpack (optional)
Babel (optional)
Redux
React - Redux
Middleware (Redux Thunk)
Request library (Fetch, Axios etc)](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-5-320.jpg)
![By Dan Jipa [dan.jipa@gmail.com]
Redux in a few words
REDUX
Store = {global application state}; dispatch()
Actions <User, Browser, Server> = the only way to change state
Reducers = mapping actions in state updates
connect() = sending data to low level components via props
high level/container components = components with access to global store](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-6-320.jpg)
![By Dan Jipa [dan.jipa@gmail.com]
Updating our state
REDUX
CURRENT STATE
Action
REDUCER NEW STATE](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-7-320.jpg)
![By Dan Jipa [dan.jipa@gmail.com]
Fetching data with Redux
REDUX
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import rootReducer from '../reducers'
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState, applyMiddleware(thunk)
);
return store
}
Creating our initial store
Modifying it using actions
export function translate(text, target) {
return dispatch => {
return fetch('https://www.googleapis.com/language/translate/v2?key='+API_KEY+'&source=en&target='+target+'&q='+ text)
.then(response => response.json())
.then(response => dispatch(receiveTranslation(text, target, response.data.translations[0].translatedText)))
}
}](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-8-320.jpg)
![By Dan Jipa [dan.jipa@gmail.com]
LEARN REDUX
REDUX
How to manage request state with React & Redux
Redux - official docs
A cartoon intro to Redux
Getting started with Redux - Video lectures by Dan Abramov
React - Redux - Udemy course (PAID)](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-9-320.jpg)
![By Dan Jipa [dan.jipa@gmail.com]
fb: dan.jipa,
tw: danjipa,
dan.jipa@gmail.com
Thank you!
Let’s stay in touch
REDUX](https://image.slidesharecdn.com/dan-jipa-redux-react-160620072340/85/Using-Redux-with-React-10-320.jpg)
Using Redux with React
- 1. REDUX BY DAN JIPA, TEAM LEADER SOFTVISION a predictable state container for JavaScript apps
- 2. The need Managing state in big applications is too complicated. REDUX By Dan Jipa [[email protected]] There is no separation of concerns. Simplified debugging. ! Single Source of Truth
- 3. Traditional communication between components By Dan Jipa [[email protected]]REDUX 1. Props 2. Callback functions 3. Event bubbling 4. Parent component 5. Observer pattern (publish,subscribe) 6. Global vars 1 2, 3 4 5, 6, 7 7. Context Image: http://andrewhfarmer.com/component-communication/
- 4. Traditional data fetching By Dan Jipa [[email protected]]REDUX 1. Root component 2. Container component
- 5. By Dan Jipa [[email protected]] What do we need to start using Redux with React? REDUX Webpack (optional) Babel (optional) Redux React - Redux Middleware (Redux Thunk) Request library (Fetch, Axios etc)
- 6. By Dan Jipa [[email protected]] Redux in a few words REDUX Store = {global application state}; dispatch() Actions <User, Browser, Server> = the only way to change state Reducers = mapping actions in state updates connect() = sending data to low level components via props high level/container components = components with access to global store
- 7. By Dan Jipa [[email protected]] Updating our state REDUX CURRENT STATE Action REDUCER NEW STATE
- 8. By Dan Jipa [[email protected]] Fetching data with Redux REDUX import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk'; import rootReducer from '../reducers' export default function configureStore(initialState) { const store = createStore(rootReducer, initialState, applyMiddleware(thunk) ); return store } Creating our initial store Modifying it using actions export function translate(text, target) { return dispatch => { return fetch('https://www.googleapis.com/language/translate/v2?key='+API_KEY+'&source=en&target='+target+'&q='+ text) .then(response => response.json()) .then(response => dispatch(receiveTranslation(text, target, response.data.translations[0].translatedText))) } }
- 9. By Dan Jipa [[email protected]] LEARN REDUX REDUX How to manage request state with React & Redux Redux - official docs A cartoon intro to Redux Getting started with Redux - Video lectures by Dan Abramov React - Redux - Udemy course (PAID)
- 10. By Dan Jipa [[email protected]] fb: dan.jipa, tw: danjipa, [email protected] Thank you! Let’s stay in touch REDUX