Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
240 views

Redux: #React Notes

Redux is a library that allows for global state management in React applications. It creates a single global state that can be accessed from any React component without using a parent-child relationship. Redux is useful for applications with large, complex state that is needed across many components. It implements a unidirectional data flow where state changes are made through actions that update copies of the state rather than mutating the state directly. The core Redux concepts are actions, reducers, and the store. Actions describe state changes, reducers handle the changes, and the store holds the application state.

Uploaded by

Meet Munjapara
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
240 views

Redux: #React Notes

Redux is a library that allows for global state management in React applications. It creates a single global state that can be accessed from any React component without using a parent-child relationship. Redux is useful for applications with large, complex state that is needed across many components. It implements a unidirectional data flow where state changes are made through actions that update copies of the state rather than mutating the state directly. The core Redux concepts are actions, reducers, and the store. Actions describe state changes, reducers handle the changes, and the store holds the application state.

Uploaded by

Meet Munjapara
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Redux

#React Notes
Redux
What is Redux?
 Redux is a package that creates a global state which you can share between
React components—no parent / child relationship required.

Akash Technolabs www.akashsir.com


Introduction to Redux
 Redux is one of the libraries that helps you implement sophisticated state
management in your application.
 It goes beyond the local state (e.g. React's local state) of a component. It is
one of the solutions you would take in a larger application in order to tame
the state.
 When using Redux, you don't actually change the state, you create updated
copies of the state that are then inserted into your React components.
 Redux can be used in React,Angular & Vue JS

Akash Technolabs www.akashsir.com


Why Should I Use Redux?#
 Redux helps you manage "global" state - state that is needed across many
parts of your application.

Akash Technolabs www.akashsir.com


Akash Technolabs www.akashsir.com
When Should I Use Redux?
 Redux helps you deal with shared state management,
 Redux is more useful when:
 You have large amounts of application state that are needed in many places in the app
 The app state is updated frequently over time
 The logic to update that state may be complex
 The app has a medium or large-sized codebase, and might be worked on by many
people

Akash Technolabs www.akashsir.com


Redux Architecture
 Redux Follows the unidirectional flow
 Redux Includes single store
 Reducer handles all logic

Akash Technolabs www.akashsir.com


Akash Technolabs www.akashsir.com
Actions
 An action sends data from your application to the Redux store.
 An action is conventionally an object with two properties: type and (optional)
payload(Parameter).
 The type is generally an uppercase string (assigned to a constant) that
describes the action. The payload is additional data that may be passed.

 const DELETE_TODO = 'DELETE_TODO'


{
type: DELETE_TODO,
payload: id,
}

Akash Technolabs www.akashsir.com


Reducers
 A reducer is a function that takes two parameters: state and action.
 A reducer is immutable and always returns a copy of the entire state.
 A reducer typically consists of a switch statement that goes through all the
possible action types.

Akash Technolabs www.akashsir.com


const initialState = {
todos: [
{id: 1, text: 'Eat'},
{id: 2, text: 'Sleep'},
],
loading: false,
hasErrors: false,
}

function todoReducer(state = initialState, action) {


switch (action.type) {
case DELETE_TODO:
return {
...state,
todos: state.todos.filter((todo) => todo.id !==
action.payload),
}
default:
return state
}
}

Akash Technolabs www.akashsir.com


Store
 The Redux application state lives in the store, which is initialized with a
reducer.
 When used with React, a <Provider> exists to wrap the application, and
anything within the Provider can have access to Redux.

Akash Technolabs www.akashsir.com


Redux store methods
 You might be surprised to know that Redux itself is a small library (2KB) and
the most important methods are just three:
 getState for reading the current state of the application
 dispatch for dispatching an action
 subscribe for listening to state changes

Akash Technolabs www.akashsir.com


getState
 It helps you retrieve the current state of your Redux store.
 store.getState()

Akash Technolabs www.akashsir.com


dispatch
 It allows you to dispatch an action to change a state in your application.

store.dispatch({type:'ITEMS_REQUEST'})

Akash Technolabs www.akashsir.com


subscribe
 It helps you register a callback that Redux store will call when an action has
been dispatched.
 As soon as the Redux state has been updated, the view will re-render
automatically.

store.subscribe(()=>{ console.log(store.getState());})

Akash Technolabs www.akashsir.com


Official Website
 https://redux.js.org/

Akash Technolabs www.akashsir.com


Folder

Akash Technolabs www.akashsir.com


Install
 Create New project
 create-react-app my-react-app
 Install Redux in Project
 npm install --save redux
 Install React Redux in Project
 npm install --save react-redux

Akash Technolabs www.akashsir.com


Get Exclusive
Video Tutorials

www.aptutorials.com
https://www.youtube.com/user/Akashtips
www.akashsir.com
Rating Us Now

Just Dial
https://www.justdial.com/Ahmedabad/Akash-Technolabs-
Navrangpura-Bus-Stop-Navrangpura/079PXX79-XX79-
170615221520-S5C4_BZDET

Sulekha
https://www.sulekha.com/akash-technolabs-navrangpura-
ahmedabad-contact-address/ahmedabad
Connect With Me
# Social Info

Akash.padhiyar
Akashpadhiyar
Akash Padhiyar
#AkashSir Akash_padhiyar

+91 99786-21654

www.akashsir.com
www.akashtechnolabs.com #Akashpadhiyar
www.akashpadhiyar.com #aptutorials
www.aptutorials.com

You might also like