Redux and React Redux
Duration : 00:03:00
ReactJS - Redux
ReactJS with Redux is a powerful combination for state management in web applications. It allows you to centralize your application's state and manage it efficiently, ensuring a predictable and scalable architecture.Example
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
function App() {
return (
<Provider store={store}>
{/* Your app components */}
</Provider>
);
}
Store
The Redux store is a single source of truth for your application's state. It holds the complete state tree and can be accessed or modified using actions and reducers.Example
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
Action
Actions are plain JavaScript objects that represent something that happened in your application. They are dispatched to the Redux store to trigger state changes.Example
const incrementCounter = () => ({
type: 'INCREMENT',
});
Reducers
Reducers are pure functions that specify how the application's state changes in response to actions. They take the current state and an action as input and return the new state.Example
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
Action Creators
Action creators are functions that create and return action objects. They simplify the process of creating actions with predefined properties.Example
const incrementCounter = () => ({
type: 'INCREMENT',
});
Component
Components are the building blocks of a React application. They render UI elements and can be connected to the Redux store to access and update state.Example
import { connect } from 'react-redux';
const Counter = ({ count, increment }) => (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
const mapStateToProps = (state) => ({
count: state.counter,
});
const mapDispatchToProps = {
increment: incrementCounter,
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
Redux API
Redux provides a set of APIs and methods for managing the state, including createStore, combineReducers, and applyMiddleware.Example
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const rootReducer = combineReducers({
// Combine your reducers here
});
const store = createStore(rootReducer, applyMiddleware(thunk));
mapStateToProps
mapStateToProps is a function used in the connect function to map the state from the Redux store to the props of a component.Example
const mapStateToProps = (state) => ({
count: state.counter,
});
mapDispatchToProps
mapDispatchToProps is used in the connect function to map action creators to the props of a component, making it easier to dispatch actions.Example
const mapDispatchToProps = {
increment: incrementCounter,
};
Provider Component
The Provider component is part of the React-Redux library and is used to wrap the root of your React application. It provides the Redux store to all components in your app.Example
import { Provider } from 'react-redux';
import store from './store';
function App() {
return (
<Provider store={store}>
{/* Your app components */}
</Provider>
);
}
Use the Connected Component
You can now use the connected component in your application as you would with any other React component. It will have access to the Redux store's state and the ability to dispatch actions to update the state.Example
// App.js
import React from 'react';
import './App.css';
import Counter from './Counter';
function App() {
return (
<div className="App">
<Counter />
</div>
);
}
export default App;
Still have some questions? Let's discuss.
CONTACT US