What is Redux ?
Redux is a predictable state container for JavaScript apps.
A cliche definition you'll get on the internet for redux.
The definition is absolutely correct but it's difficult for the beginners to understand it.
So in the simplest of words, i would define Redux as,
A place in your codebase where you keep the data that is shared across your application.
What problem does redux solve?
Every new technology / framework / design pattern solves some kinda problem & that's why it's developed in the first place.
Redux solves the problem of props drilling.
This article is specifically for Redux but i'll try to explain props drilling via a Diagram.
Now imagine a situation where i've to send data from Child Component A1 to Child Component A2.
I've to send it through Parent Component A right ? There's no other way.
Imagine another situation where i've to send data from Child Component A1 to Child Component B1.
I've to send it through Parent Component A to Parent Component B & then to Child Component B1 right ? There's no other way.
Well this need to involve parent component for sibling-to-sibling communication is called props drilling.
Ideally, siblings should have communicated directly between them.
This is exactly what Redux helps us achieve.
This is how Redux recommends to solve the problem.
This Common Storage makes it easy for each component to access & update data without involving its parent.
Now there should be some standard way to update & access this data right ?
This is where Redux Architecture comes in.
Redux Terminology
Let's get ourselves familiar with Redux's terminology.
Redux has 5 main concepts.
Actions
Dispatcher
Reducer
Store
Selector
Actions
Actions are a simple javascript object with a few specific keys type & payload
type describes what kind of action you wanna take. It's a simple string to logically describe what kind of change you wanna do in the redux store. This is a mandatory field
payload is basically any kinda data that you wanna send to store. This is an optional field.
For example, an action to store array of todo list items items might look like,
const saveTodosAction = {
type: 'todos/saveTodos',
payload: ['buy milk', 'feed pets', 'do laundry']
}
Dispatcher
It is a Redux store function that is used to dispatch the actions.
The only way to send actions is via the dispatcher function.
For example, dispatching an action to store array of todo list items items might look like,
const saveTodosAction = {
type: 'todos/saveTodos',
payload: ['buy milk', 'feed pets', 'do laundry']
}
store.dispatch(saveTodosAction);
Reducer
It is the brain of the Redux.
Reducer is a function which receives current state & the action dispatched by the dispatcher.
Based on the type of action, reducer makes changes to the state & returns the updated state.
The only way to update the store is via the Reducer.
Store
The store is an object where all the shared data is kept.
Store data can be updated only by the reducer.
Selector
The state of the app can be complex. We might not need entire state every time.
We might need to access only a certain part of the state.
Selector is a function which helps us to extract the exact value we need from the state.
Next Steps
Now that we know about the basics of redux, let's try to implement it.
Redux recommends using Redux Toolkit for redux implementation
Please refer to their official docs here: Redux Toolkit Docs.
In case you want to see implemented code, checkout my code here: Sandbox Link
I've also coded a more realistic example here: Sandbox Link
It's a todo list project. I've added the GET API. Please feel free to implement rest of the CRUD yourself using createAsyncThunk API.