-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
184 lines (176 loc) · 12.2 KB
/
index.html
File metadata and controls
184 lines (176 loc) · 12.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn React Toolkit, Redux Toolkit, useSelector, and Redux Persist integration for modern state management">
<title>Redux Toolkit - Modern State Management for React</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar" id="navbar">
<div class="container nav-container">
<div class="nav-brand">
<a href="index.html">Redux<span>Toolkit</span></a>
</div>
<button class="mobile-toggle" id="mobileToggle">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu" id="navMenu">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="https://github.com/DonaldValentine/ReduxtoolKit" target="_blank" class="github-link">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
GitHub
</a></li>
<li><a href="download.html" class="btn-download">Download</a></li>
</ul>
</div>
</nav>
<section class="hero">
<div class="container hero-container">
<div class="hero-content">
<h1 class="hero-title">Master <span class="highlight">Redux Toolkit</span> for React</h1>
<p class="hero-subtitle">Build scalable applications with modern state management. Learn efficient patterns, hooks, and best practices for <a href="https://reduxtoolkit.com/" class="inline-link">React Toolkit</a> development.</p>
<div class="hero-buttons">
<a href="https://reduxtoolkit.com/" target="_blank" class="btn btn-primary">Visit Official Site</a>
<a href="download.html" class="btn btn-secondary">Get Started</a>
</div>
</div>
<div class="hero-image">
<div class="code-window">
<div class="window-header">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
</div>
<div class="window-content">
<pre><code><span class="keyword">import</span> { configureStore } <span class="keyword">from</span> <span class="string">'@reduxjs/toolkit'</span>;
<span class="keyword">const</span> store = <span class="function">configureStore</span>({
reducer: {
user: userReducer,
posts: postsReducer,
},
});
<span class="keyword">export default</span> store;</code></pre>
</div>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container">
<div class="section-header">
<h2>Why Choose Redux Toolkit?</h2>
<p>The official, opinionated, batteries-included toolset for efficient Redux development</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Simple & Powerful</h3>
<p>Simplify your Redux code with createSlice and createAsyncThunk. Write less boilerplate, achieve more functionality with modern patterns.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎯</div>
<h3>Type-Safe</h3>
<p>Built with TypeScript in mind. Get excellent autocomplete and type checking out of the box for safer development workflows.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>Best Practices</h3>
<p>Includes Redux DevTools, Immer for immutability, and RTK Query for data fetching. Everything you need in one package.</p>
</div>
</div>
</div>
</section>
<section class="content-section">
<div class="container">
<div class="content-grid">
<div class="content-block">
<h2>Getting Started with React Toolkit</h2>
<p>Redux Toolkit is the official recommended approach for writing Redux logic. It provides a set of tools that simplify the most common Redux use cases, including store setup, creating reducers and writing immutable update logic.</p>
<p>The toolkit eliminates the need for hand-written action creators and action types, reduces boilerplate code, and makes it easier to write Redux applications. Whether you're building a new project or maintaining an existing one, Redux Toolkit provides the best developer experience.</p>
<p>Integration with React is seamless through React-Redux hooks, making state management intuitive and efficient. The modern API design ensures your code remains clean, maintainable, and scalable as your application grows.</p>
</div>
<div class="content-block">
<h2>Efficient State Selection with Hooks</h2>
<p>Understanding <a href="https://reduxtoolkit.com/how-to-use-useselector-in-redux-toolkit/" class="inline-link">how to use useSelector in Redux Toolkit</a> is essential for building performant React applications. The useSelector hook allows you to extract data from the Redux store state, replacing the old mapStateToProps pattern with a more modern and flexible approach.</p>
<p>This hook enables your components to subscribe to specific parts of the Redux store, ensuring they only re-render when the selected data changes. This optimization is crucial for maintaining excellent performance in larger applications with complex state trees.</p>
<p>By leveraging useSelector effectively, you can write cleaner component code that's easier to test and maintain. The hook automatically handles subscriptions and updates, letting you focus on building features rather than managing state infrastructure.</p>
</div>
<div class="content-block">
<h2>Persistent State Management</h2>
<p>Many applications require state persistence across page refreshes and sessions. Learning <a href="https://reduxtoolkit.com/how-to-use-redux-persist-with-redux-toolkit/" class="inline-link">how to use Redux Persist with Redux Toolkit</a> enables you to save your Redux state to localStorage or other storage engines automatically.</p>
<p>Redux Persist seamlessly integrates with Redux Toolkit, allowing you to configure which parts of your state should be persisted and which should remain temporary. This is particularly useful for maintaining user preferences, shopping carts, authentication tokens, and other data that should survive page reloads.</p>
<p>The library handles serialization, deserialization, and state rehydration automatically, making it incredibly easy to add persistence to your Redux store. Combined with Redux Toolkit's simplified setup, you can implement robust state persistence with minimal configuration.</p>
</div>
</div>
</div>
</section>
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2>Ready to Build Something Amazing?</h2>
<p>Start using Redux Toolkit today and experience modern state management at its finest</p>
<div class="cta-buttons">
<a href="https://reduxtoolkit.com/" target="_blank" class="btn btn-primary">Explore Documentation</a>
<a href="download.html" class="btn btn-outline">Download Now</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h3>Redux<span>Toolkit</span></h3>
<p>Modern state management for React applications</p>
</div>
<div class="footer-links">
<div class="footer-column">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="download.html">Download</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="https://reduxtoolkit.com/" target="_blank">Official Site</a></li>
<li><a href="https://github.com/DonaldValentine/ReduxtoolKit" target="_blank">GitHub</a></li>
<li><a href="https://reduxtoolkit.com/how-to-use-useselector-in-redux-toolkit/" target="_blank">useSelector Guide</a></li>
<li><a href="https://reduxtoolkit.com/how-to-use-redux-persist-with-redux-toolkit/" target="_blank">Redux Persist Guide</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Connect</h4>
<div class="social-links">
<a href="https://github.com/DonaldValentine/ReduxtoolKit" target="_blank" aria-label="GitHub">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 ReduxToolkit. All rights reserved.</p>
<p>Designed & Developed with ❤️ by Factory Droid</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>