Using Redux with React

Using Redux with React

• 1.
  REDUX BY DAN JIPA,TEAM LEADER SOFTVISION a predictable state container for JavaScript apps
• 2.
  The need Managing statein 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
• 3.
  Traditional communication betweencomponents 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/
• 4.
  Traditional data fetching ByDan Jipa [dan.jipa@gmail.com]REDUX 1. Root component 2. Container component
• 5.
  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)
• 6.
  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
• 7.
  By Dan Jipa[dan.jipa@gmail.com] Updating our state REDUX CURRENT STATE Action REDUCER NEW STATE
• 8.
  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)))
 }
 }
• 9.
  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)
• 10.
  By Dan Jipa[dan.jipa@gmail.com] fb: dan.jipa, tw: danjipa, dan.jipa@gmail.com Thank you! Let’s stay in touch REDUX