Folder Strutcure
Updated dependencies in package.json file:
"dependencies": {
"normalizr": "^3.6.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Below is an example of normalize state in Redux Applications.
import React from 'react'
import Normalize from './components/Normalize'
const App = () => {
return (
<div>
<Normalize />
</div>
)
}
export default App
import React from 'react'
import { normalize, schema } from 'normalizr';
const Normalize = () => {
const userSchema = new schema.Entity('users');
const postSchema = new schema.Entity('posts', {
author: userSchema
});
const data = {
users: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
],
posts: [
{
id: 1, title: 'Post 1',
author: { id: 1, name: 'Alice' }
},
{
id: 2, title: 'Post 2',
author: { id: 2, name: 'Bob' }
}
]
};
const normalizedData = normalize(data, {
users: [userSchema],
posts: [postSchema]
});
console.log(normalizedData);
return (
<div style={{
textAlign: "center",
fontWeight: "bolder",
fontSize: "larger"
}}>Normalize State in Redux Applications</div>
)
}
export default Normalize
Output:
How to Normalize State in Redux Applications ?
In Redux applications, efficient state management is essential for scalability and maintainability. Normalization is a technique used to restructure complex state data into a more organized format, improving performance and simplifying state manipulation.
This article covers the concept of normalization in Redux, exploring various approaches, steps to implement it, and an example application.
Table of Content
- Approach 1: Manual Normalization
- Approach 2: Using Normalizr Library
- Normalizing State in Redux Applications
Contact Us