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

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 Store ✓ 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 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 With only React Uni-directional Data Flow, direct communication between components is not allowed 2 State Is Read-only 3 Change Using Pure Functions Copyright © 2017, edureka and/or its affiliates. All rights reserved.

Principles Of Redux 1 Store Single 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. 2 State Is Read-only 3 Change Using Pure Functions Copyright © 2017, edureka and/or its affiliates. All rights reserved.

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

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

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

Action function addTodo(text) { return { type: ADD_TODO, text } } ACTION • 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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

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

Reducer 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 Prev State ACTION It returns the previous state if no work needs to be done Reducer 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. New State Copyright © 2017, edureka and/or its affiliates. All rights reserved.

Reducer function reducer(state = initialState, action) { switch (action.type) { case ADD_TODO: return Object.assign({}, state, { todos: [ ...state.todos, { text: action.text, completed: false } ] Prev State ACTION }) default: return 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 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 Store State Tree Copyright © 2017, edureka and/or its affiliates. All rights reserved.

Store import { createStore } from 'redux' import todoApp from './reducers’ let store = createStore(reducer) Store • 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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.

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

View STATEFUL <Component/> STATELESS <Component/> STATELESS <Component/> • 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. 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 Actions Container (Smart Component) Re-render when Store changes Pass Data As Props One Store Provider Component Container (Dumb Component) 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 Great! Let me connect to get the updates Ohk..let me set up a network to keep your components updated Copyright © 2017, edureka and/or its affiliates. All rights reserved.

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

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

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

Presentation Transcript

Modernization Theory Redux

PONG REDUX

HarperCollins Redux

Version Redux

Threads Redux

ASHG Redux 2008

Policy Analysis Redux

Staar redux !

IWEX Directionality Redux

Image Application Redux

CIPA Redux

Putin redux

Industrial policy redux

Section 8: Redux

Monopolies Redux

Cost Analysis, Redux

Community Keys ( Redux )

Xrootd Redux

React Context API â€“ A Replacement for Redux?

App Development Training_ React and Redux - Course Gate

Accessible Animation: Redux

Software requirements redux