Steps to implement Redux.
Step 1: Install redux in your project via following command.
npm i redux react-redux
Step 2: Create a store.
Javascript
/* store.js */import { createStore } from 'redux';const initialState = { count: 0,};const counterReducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; }};const store = createStore(counterReducer);export default store; |
Step 3: Create an action:
Javascript
/* Action.js */export const increment = () => ({ type: 'INCREMENT',});export const decrement = () => ({ type: 'DECREMENT',}); |
Step 4: Create a Counter Component:
Javascript
/* Counter.js */import React from 'react';import { connect } from 'react-redux';import { increment, decrement } from './actions';import "./App.css"const Counter = ({ count, increment, decrement }) => ( <div className='container'> <h1>w3wiki</h1> <h3>Counter: {count}</h3> <div className="button"> <button onClick={increment}>Increment by 1</button> <button onClick={decrement} >Decrement by 1</button> </div> </div>);const mapStateToProps = (state) => ({ count: state.count,});export default connect(mapStateToProps, { increment, decrement })(Counter); |
Step 5: Wrap the all components in index.js and update the App.css file
Javascript
/* index.js */import React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import store from './store';import Counter from './Counter';ReactDOM.render( <Provider store={store}> <Counter /> </Provider>, document.getElementById('root')); |
CSS
/* App.css */.container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh;}.button { position: relative; right: 24px; display: flex; margin-left: 50px; margin-top: 20px; gap: 20px;}.button button { padding: 10px 20px; font-size: 14px; background-color: #4caf50; color: white; border: none; border-radius: 5px; cursor: pointer;}.button button:hover { background-color: #45a049;}h1 { color: #45a049;} |
Steps to run application:
Step 1: Open the terminal and type the following command.
npm start
Step 2: Open browser and search the given URL.
http://localhost:3000/
Output: Open a web browser and navigate to http://localhost:3000.
Comparing Redux and Context API in React: A Comprehensive Analysis
In this article, we are going to learn about the difference between the Redux and Context APIs. We will cover each of them entirely with their live examples, and then we will cover the differences between them.
Table of Content
- Context API
- Redux
- Difference between Redux and Context API
- Conclusion