React-Redux
That is state container for managing the state of react applications. React-Redux facilitates centralized management and enables efficient data flow across components.
Syntax to Install:
npm install redux react-redux
Example: Below is an example of creating a React-Redux.
import React from "react";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";
// define the action means increament and decrement
const increment = () => ({ type: "INCREMENT" });
const decrement = () => ({ type: "DECREMENT" });
// Reduce a increment and decrement count
const counterReducer = (state = { count: 0 }, action) => {
switch (action.type) {
case "INCREMENT":
return { count: state.count + 1 };
case "DECREMENT":
return { count: state.count - 1 };
default:
return state;
}
};
// store the all value
const store = createStore(counterReducer);
const Counter = ({ count, increment, decrement }) => {
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
// Map state to props
const mapStateToProps = (state) => ({
count: state.count,
});
// Map dispatch to props
const mapDispatchToProps = {
increment,
decrement,
};
// Connected Counter Component
const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
const App = () => {
return (
<Provider store={store}>
<div className="App">
<ConnectedCounter />
</div>
</Provider>
);
};
export default App;
8 Most used NPM packages for React
React, a popular JavaScript library for building UI (user interfaces), offers a vast ecosystem of packages to enhance development efficiency and functionality. React allows developers to utilize individual parts of their application on both the client side and the server side, which ultimately boosts the speed of the development process.
Table of Content
- React-router-dom:
- Axios:
- React-Redux:
- Formik:
- React-boostrap:
- React-icons:
- React-datepicker:
- React-slick: