19 CEO Dashboard Examples for Business Leaders
Let's rewind to the 1990s. Data used to be stored on servers and CEOs relied on basic tools to make optimal decisions. No dashboards, nothing. When you use Power BI with a solid...
Kapil Panchal - August 26, 2022
Listening is fun too.
Straighten your back and cherish with coffee - PLAY !
Redux is more adaptable and popular among developers. In fact, when it comes to state management libraries, Redux appears to be the #1 option among front-end developers.
When developers work on a large project employing the most popular frameworks Angular, React, or Vue, then state management library is a key factor they deal with.
Several barriers persist while using Redux, which the Redux js toolkit attempts to address. As a result, the Redux team explicitly supports using this toolkit to eliminate issues. Now is the time for companies to prioritize this area of bespoke software development.
Redux assists you in handling global state of your application. It effectively learns the app logic behavior in response to modifications made. The figure below depicts the Redux process of your application.
Figure 1 Redux Workflow
To understand how redux works, it’s essential to learn three components of redux flow which are Action, Reducer, and store.
Redux patterns make states predictable, scalable, and easy to maintain due to the precise rule of how each unit in the redux flow should behave and work.
However Redux comes with a few challenges:
To overcome these challenges, the Redux team introduced Redux Toolkit which enables you write redux logic efficiently. Redux toolkit includes core redux packages with simple & clean redux code.
Install the required packages first in order to use Redux Toolkit and React-redux in your React application.
npm install @reduxjs/toolkit react-redux
In traditional redux, you may write actions and reducer functions separately just as shown below:
Actionsconst INCREMENT = "INCREMENT"; const DECREMENT = "DECREMENT"; const RESET = "RESET"; export { INCREMENT, DECREMENT, RESET };Reducer
const intialState = { count: 0, }; const counterReducer = (state = intialState, action) => { switch (action.type) { case "INCREMENT": { return { count: state.count + 1, }; } case "DECREMENT": { return { count: state.count - 1, }; } case "RESET": { return { count: 0, }; } default: return state; } }; export default counterReducer;
By using the Redux toolkit and createSlice, you may write better code with fewer lines.
Now, create a counterSlice.js file in the src/slice/ directory. The counterSlice file will look like this:
counterSlice.js
import { createSlice } from "@reduxjs/toolkit"; const counterSlice = createSlice({ name: "counter", initialState: { count: 0, }, reducers: { incrementCount(state) { state.count = state.count + 1; }, decrementCount(state) { state.count = state.count - 1; }, resetCount(state) { state.count = 0; }, }, }); export default counterSlice; export const counterSliceAction = counterSlice.actions;
As you can see, the code is considerably better and understandable with less lines. It is not necessary to use switch case statements to manage actions with matching reducers. It also supported directly-assigning value to the state rather than returning the new value when updating the state.
Next, create a store.js file in the src directory of the project. The store holds the state of our application.
To create a store, first you should import the configureStore from the redux-toolkit package.
Here the createStore in redux is replaced by configureStore. configureStore not only creates the store but also accepts reducer functions as an argument and automatically installs the Redux DevTools extension for debugging.
import counterSlice from "./slices/counterSlice"; import { configureStore } from "@reduxjs/toolkit"; const store = configureStore({ reducer: { count: counterSlice.reducer, }, }); export default store;
Here counterSlice reducer is imported from counterSlice.js and passed it to configureStore.
Once done with creating the store, import the React-redux Provider and pass the store as a prop. This allows you to access the store from any component of your React application.
import React from "react"; import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; import App from "./App"; import store from "./store"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();
Now, create a Counter.js component in the src directory. And import the useSelector and useDispatch hook from the react-redux.
Also, you need to import actions from counterSlice.js to trigger an event.
import React from "react"; import { useDispatch, useSelector } from "react-redux"; import {userSliceAction} from "./slices/counterSlice"
Now initialize the useDispatch and useSelector hook in a counter component. Here you may get the value of count using the useSelector hook and dispatch the event when the user clicks the increment, decrement, and reset button.
When a user hit one of these buttons, an event is fired in the counterSlice reducer based on the action's count update value.
const Counter = () => { const count = useSelector((state) => state.count.count); const dispatch = useDispatch(); return ( <>> ); }; export default Counter;Counter App Using Redux Toolkit
{count}
Here is the final output of your Redux toolkit-powered counter react application.
Figure 2 Counter application using Redux Toolkit
That’s it for this tutorial, stay tuned with iFour Technolab for more interesting and informative blogs.
Redux enables developers to write simpler, more legible code while maintaining the redux in the appropriate flow and pattern. For beginners and developers, the Redux toolkit is a great option to reduce the amount of boilerplate code in Redux.
In this blog, we discussed how Redux works, its limitations, and why you should use Redux Toolkit instead of Redux. We also learnt how to utilize the redux toolkit in a React project and develop redux code in a single file, including reducers and actions.
Build Your Agile Team
Let's rewind to the 1990s. Data used to be stored on servers and CEOs relied on basic tools to make optimal decisions. No dashboards, nothing. When you use Power BI with a solid...
Imagine walking into a meeting where critical decisions need to be made—fast. You need clear, flexible data that you can analyze on the spot. But what if your insights are locked inside...
Clear insights mean smarter decisions, and this is what data storytelling does. It helps you speak a language that you quickly understand. Like for example, you are a CTO dealing with...