Redux is a predictable state container for javascript applications. In layman's term, We store our data in a centralized place and pass it where ever needed by the application.
Store - A centralized data store (Read only, Plan object).Action - An information about the change (type) and an optionally payload data.Reducer - A pure function to decide what to do with the action type and payload.function createStore() {
// To get the state
function getState() {}
// To dispatch or send an action
function dispatch() {}
// To subscribe to the state change
function subscribe() {}
// Return the above methods
return { getState, dispatch, subscribe };
}
// To combine all the reducers
function combineReducers() {}
To create our data store of the application. The main concept of redux is we can have only one store. createStore() method accepts three arguments as following.
optional)optional) - Just to reduce the scope of this post we will not look into this.createStore() function will return 3 methods such as getState, dispatch, subscribe.
This method has one job which is always return the updated state from the store.
function createStore(reducer, preloadedState, enhancers) {
// If preloaded state else empty object
let state = preloadedState || {};
// Return the store state
function getState() {
return state;
}
return {
getState,
};
}
subscribe() method is useful when we want to listen to whenever the store state is updated. This method also returns unsubscribe() method, so that we can opt-out when we no longer need it.
function createStore(reducer, preloadedState = {}, enhancers) {
// If preloaded state else empty object
let state = preloadedState || {};
// To store the list of subscribers for the state change
let listeners = [];
// Return the store state
function getState() {
return state;
}
// To subscribe to state change
function subscribe(listener) {
listeners.push(listener);
// Returns an anonymous function to unsubscribe it
return function () {
listeners = listeners.filter((l) => l !== listener);
};
}
return { getState, subscribe };
}
Dispatches an action that contains information about the change. The information is plan object which contains a type and optional payload.
The dispatch() method is the only way to update the state in the redux store.
reducer passed to createStore() when we created the store.function createStore(reducer, preloadedState = {}, enhancers) {
// If preloaded state else empty object
let state = preloadedState || {};
// To store the list of subscribers for the state change
let listeners = [];
// Return the store state
function getState() {
return state;
}
// To subscribe to state change
function subscribe(listener) {
listeners.push(listener);
// Returns an anonymous function to unsubscribe
return function () {
listeners = listeners.filter((l) => l !== listener);
};
}
function dispatch(action) {
state = reducer(state, action); // save the updated state from reducer
// call all the listeners
listeners.forEach((listener) => listener());
}
// To initializing the store with initial state of the reducers
dispatch({ type: '@@redux/INIT' }); // now you know why you see this log on page load
return { getState, subscribe, dispatch };
}
Combine reducers function is responsible for combining all reducers and call it to update the state, when an action is dispatched.
state & action).function combineReducers(reducers) {
return (state = {}, action) => {
return Object.keys(reducers).reduce((nextState, key) => {
nextState[key] = reducers[key](state[key], action); // Calling the reducers
return nextState;
}, {});
};
}
I have learned so much about redux by writing this post and I hope you have learned something new as well. The code I wrote is just to show how redux would have been implemented. And this code is only for learning purposes. Not meant to be used in production or development.
Thanks for reading to the end. If you have any doubts post your comments below. See ya in the next post.