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
