React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | Edureka

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Agenda ❑ What Is Artificial Intelligence ? ❑ What Is Machine Learning ? ❑ Limitations Of Machine Learning ❑ Deep Learning To The Rescue ❑ What Is Deep Learning ? ❑ Deep Learning Applications

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Need For Redux ✓ In React the data flows through Components ✓ It follows uni-directional data flow i.e data always flows from parent to child component.

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Need For Redux ✓ Child components can’t pass data to its parent component ✓ The non-parent components can’t communicate within each other ✓ React doesn't recommend direct component-to- component communication this way.

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Need For Redux ✓ Redux offers a solution of storing all your application state in one place, called a "store“ ✓ Components then "dispatch" state changes to the store, not directly to other components. ✓ The components that need to be aware of state changes can "subscribe" to the store Store Dispatch Subscribe

Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is Redux? Redux one of the hottest libraries for front end development Redux is a predictable state container for JavaScript apps Mostly used for applications State Management Developed by Dan Abramov and Andrew Clark in 2015 It is inspired by Facebook’s Flux and influenced by functional programming language Elm

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Principles Of Redux 1 Single Store 2 State Is Read-only 3 Change Using Pure Functions With only React Uni-directional Data Flow, direct communication between components is not allowed

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Principles Of Redux 1 Single Store 2 State Is Read-only Store Redux uses Store for storing all the application state at one place. Components state is stored in the Store and they receive updates from the store itself. 3 Change Using Pure Functions

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Principles Of Redux 2 State Is Read Only 1 Single Store 3 Change Using Pure Functions You can change the state only by triggering an action which is an object describing what happened. Action: No ACTION

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Principles Of Redux 2 State Is Read Only You can change the state only by triggering an action which is an object describing what happened. Action: switch ON 1 Single Store 3 Change Using Pure Functions

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Pure Function Principles Of Redux 3 Change Using Pure Functions 1 Single Store 2 State Is Read Only Prev StateACTION New State Pure functions called Reducers are used to indicate how the State has been transformed by the Action

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Action function addTodo(text) { return { type: ADD_TODO, text } } • Must have type property that indicates the type of ACTION being performed. • They must be defined as String constant. • You can add more properties to it. ACTION

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Action function addTodo(text) { return { type: ADD_TODO, text } } • Functions which create ACTIONS • Takes in the message, converts it into system understandable format and returns a formatted Action Object. ACTION ACTION CREATOR

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Reducer Reducer Prev State ACTION New State Reducers are pure functions which specify how the applications state changes in response to an ACTION They do not change the value of the input parameter Determines what sort of update needs to be done based on the type of the action, and returns new values It returns the previous state if no work needs to be done The root reducer slices up the state based on the State Object Keys and passes them to their respective specialized reducers Reducers don’t manipulate the original state passed to them but make their own copies and then updates them.

Copyright © 2017, edureka and/or its affiliates. All rights reserved. function reducer(state = initialState, action) { switch (action.type) { case ADD_TODO: return Object.assign({}, state, { todos: [ ...state.todos, { text: action.text, completed: false } ] }) default: return state } } Reducer ACTION Prev State New State

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Reducer Things you should NEVER do inside a reducer: Mutate its arguments Perform side effects like API calls and routing transitions Call non-pure functions like Date.now() or Math.random()

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Store State Tree Store Store is an object which brings all the components to work together. It calculates the state changes and then notifies the root reducer about it. Application

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Store import { createStore } from 'redux' import todoApp from './reducers’ let store = createStore(reducer) • With Store the data state can be synchronized from the server level to the client layer without much hassel. • This makes the development of large applications easier and faster. Store

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Store Responsibilities Store Holding applications state Allowing access to state via getState() Allowing the states to be updated via dispatch(action) Registering listeners via subscribe(listener) Handles unregistering of listeners via the function returned by subscribe(listener)

Copyright © 2017, edureka and/or its affiliates. All rights reserved. View • Smart Components are the managers who are in charge of the actions and pass down a function in via the props to the dumb components. • Dumb Components provide information to the smart components if any action is required. They receive them as props and use them as callback. STATEFUL <Component/> STATELESS <Component/> STATELESS <Component/>

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Data Flow Redux architecture is concentrated on a strict unidirectional data flow In an application all the data follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization to ensure consistency

Copyright © 2017, edureka and/or its affiliates. All rights reserved. Data Flow Reducers Provider Component Actions One Store Container (Dumb Component) Container (Smart Component) Re-render when Store changes Pass Data As Props Store Store Store

Copyright © 2017, edureka and/or its affiliates. All rights reserved. 2. Set up the communication between the store and the components Hey Provider, this is the store I hired Ohk..let me set up a network to keep your components updated Great! Let me connect to get the updates

Copyright © 2017, edureka and/or its affiliates. All rights reserved. 3. Prepare the action callbacks I need to make it easy for dumb components to understand I should bind the action creator and the dispatcher so that the dumb component can just call the callback

Copyright © 2017, edureka and/or its affiliates. All rights reserved. React With Redux React bindings are not included in Redux by default so you need to install them explicitly: npm install --save react-redux You have to add these dependency along with babel, react and webpack

React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | Edureka

More Related Content

What's hot

Similar to React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | Edureka

More from Edureka!

Recently uploaded

React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | Edureka