https://github.com/arsy786/react-redux-toolkit-tutorial
This repository hosts a React-based counter application developed as a guide to demonstrate the use of Redux Toolkit for state management.
https://github.com/arsy786/react-redux-toolkit-tutorial
2023 guide reactjs redux-toolkit tutorial
Last synced: about 1 year ago
JSON representation
This repository hosts a React-based counter application developed as a guide to demonstrate the use of Redux Toolkit for state management.
- Host: GitHub
- URL: https://github.com/arsy786/react-redux-toolkit-tutorial
- Owner: arsy786
- Created: 2023-04-04T17:54:14.000Z (about 3 years ago)
- Default Branch: counter-app-with-redux
- Last Pushed: 2024-03-22T19:55:49.000Z (about 2 years ago)
- Last Synced: 2025-02-01T20:12:36.998Z (about 1 year ago)
- Topics: 2023, guide, reactjs, redux-toolkit, tutorial
- Language: JavaScript
- Homepage:
- Size: 179 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Redux Toolkit Tutorial
This project is a simple counter application built with React and Redux Toolkit. It demonstrates the basics of state management in a React application using Redux Toolkit.
This repository contains two branches:
- `counter-app-no-state-management`: A branch showcasing the counter app without Redux state management.
- `counter-app-with-redux`: A branch demonstrating the counter app with Redux state management.
You can switch between branches to see the differences in implementation.
## Table of Contents
- [React Redux Toolkit Tutorial](#react-redux-toolkit-tutorial)
- [Table of Contents](#table-of-contents)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [React Redux Toolkit Guide](#react-redux-toolkit-guide)
## Getting Started
### Prerequisites
- Node.js
### Setup
1. Open your terminal or command prompt.
2. Clone the repository using Git:
```bash
git clone https://github.com/arsy786/react-redux-toolkit-tutorial.git
```
3. Navigate to the cloned repository's root directory:
```bash
cd react-redux-toolkit-tutorial
```
4. Checkout the branch you want to run from:
```bash
git checkout
```
Replace `` with either `counter-app-no-state-management` or `counter-app-with-redux`.
5. Install NPM packages:
```bash
npm install
```
6. Start the development server:
```bash
npm start
```
This runs the app in the development mode. Open http://localhost:3000 to view it in your browser. The page will reload when you make changes.
## React Redux Toolkit Guide
React Redux is a popular library for managing the state of React applications. Redux Toolkit is a set of tools and utilities that simplify the process of building Redux applications.
Here's a step-by-step guide on how to use React Redux (Toolkit):
1. Install the required dependencies:
```bash
npm install react-redux redux @reduxjs/toolkit
```
2. Create a Redux store using configureStore function from Redux Toolkit. This function takes an object with the following properties:
reducer: a function that combines all the reducers into a single reducer
middleware: an array of middleware functions (optional)
devTools: a boolean that enables the Redux DevTools browser extension (optional)
Here's an example of creating a Redux store:
```js
// store.js
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./reducers";
const store = configureStore({
reducer: rootReducer,
devTools: true,
});
export default store;
/* Alternatively:
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({
reducer: {
counter: counterReducer,
},
});
/*
```
3. Create a reducer that handles the state changes for a particular feature of your application. A reducer is a pure function that takes the current state and an action object, and returns the new state. You can use the createSlice function from Redux Toolkit to create a reducer with a predefined structure. Here's an example of creating a counter reducer using createSlice:
```js
// counter.js
import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
name: "counter",
initialState: 0,
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
reset: (state) => {
state.value = 0;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
},
},
});
export const { increment, decrement, reset, incrementByAmount } =
counterSlice.actions;
export default counterSlice.reducer;
```
in this example, createSlice creates a reducer with the name counter, an initial state of 0, and two action creators: increment and decrement. The increment action creator increments the state by 1, and the decrement action creator decrements the state by 1.
4. Create a component that uses the Redux store. You can use the useSelector hook from react-redux to access the state values from the store, and the useDispatch hook to dispatch actions to the store. Here's an example of a component that uses the counter slice we defined earlier:
```js
// App.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./counterSlice";
function App() {
const count = useSelector((state) => state.counter);
const dispatch = useDispatch();
const handleReset = () => {
dispatch(reset());
};
const handleIncrementByAmount = (amount: number) => {
dispatch(incrementByAmount(amount));
};
return (
{count}
dispatch(increment())}>+
dispatch(decrement())}>-
Reset
handleIncrementByAmount(5)}>
Increment by 5
);
}
export default App;
```
In this example, we use the useSelector hook to access the counter state value from the store, and the useDispatch hook to dispatch the increment and decrement actions when the corresponding buttons are clicked.
5. Wrap your root component with the Provider component from react-redux. This makes the Redux store available to all the components in your application. Here's an example:
```js
// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
```