Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/masum184e/redux_state_management_basic_template
It serves as a basic template for implementing state management using Redux in React applications. It provides a structured starting point for integrating Redux into your React projects, allowing you to manage application state efficiently and maintainably.
https://github.com/masum184e/redux_state_management_basic_template
global-state-management npm react react-redux redux redux-state-management redux-template state-management
Last synced: 10 days ago
JSON representation
It serves as a basic template for implementing state management using Redux in React applications. It provides a structured starting point for integrating Redux into your React projects, allowing you to manage application state efficiently and maintainably.
- Host: GitHub
- URL: https://github.com/masum184e/redux_state_management_basic_template
- Owner: masum184e
- Created: 2024-02-20T06:28:56.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-06-04T07:42:23.000Z (7 months ago)
- Last Synced: 2024-06-05T07:54:32.757Z (7 months ago)
- Topics: global-state-management, npm, react, react-redux, redux, redux-state-management, redux-template, state-management
- Language: JavaScript
- Homepage: https://redux-state-management-basic-template.vercel.app
- Size: 130 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Redux State Management Basic Template
Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.
## Preview
Live View
## Requirements
[Install Node On Your Device](https://nodejs.org/)
## How to Run
```
git clone https://github.com/masum184e/redux_state_management_basic_template.git
cd redux_state_management_basic_template
npm install
npm run dev
```
## Redux Installation
```
npm install @reduxjs/toolkit react-redux
```
## Explaination
We bassically need 5 different component:
1. **provider:**
It wraps your React application and provides the Redux store to all components in the application. It accepts a `store` prop, which is the Redux store you created using `configureStore`. By wrapping your entire application with `Provider`, you make the Redux store available to all components in your React app.
```jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { Provider } from 'react-redux'
import store from './../redux/store.js'
ReactDOM.createRoot(document.getElementById('root')).render(
,
)
2. **store:**
The Redux store is a single source of truth for the state of your application. It holds the entire state tree of your application.
```jsx
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './features/counter/counterSlice'
import nameReducer from './features/name/nameSlice'
export default configureStore({
reducer: {
counter: counterReducer,
name: nameReducer
}
})
3. **slice:**
`slice` is a collection of Redux reducer logic and actions for a single feature of your application. It helps to organize your Redux code by grouping related reducer logic and actions together. It define the logic of how state should change.
```jsx
import { createSlice } from '@reduxjs/toolkit'
export const nameSlice = createSlice({
name: 'name',
initialState: {
value: ""
},
reducers: {
changeName: (state, action) => {
state.value = action.payload
}
}
})
export const { changeName } = nameSlice.actions
export default nameSlice.reducer
4. **selector:**
Selectors are functions that extract specific pieces of data from the Redux store state. It can be created using `useSelector` hook.
```jsx
import { useSelector } from 'react-redux'
import SuperParent from "./SuperParent"
const App = () => {
const count = useSelector(state => state.counter.value)
const name = useSelector(state => state.name.value)
return (
<>
Hello Redux
I'm from App, my name {name} & value {count}
>
)
}
export default App
5. **dispatch:**
Dispatch is a function provided by the Redux store. It's used to dispatch actions to the Redux store. Actions are payloads of information that send data from your application to your Redux store.
```jsx
import { useDispatch } from 'react-redux'
import { decrement, increment, incrementByAmount } from './../redux/features/counter/counterSlice'
import { changeName } from '../redux/features/name/nameSlice'
const Child = () => {
const dispatch = useDispatch()
return (
<>
I'm from Child
dispatch(increment())}
>
Increment
dispatch(decrement())}
>
Decrement
dispatch(incrementByAmount(5))}
>
Increment By Amount
{ dispatch(changeName(event.target.value)) }} />
>
)
}
export default Child
## Features
__Update Counter:__ It allows the user to increase/decrease the counter value by 1 as well as increase the counter value by a specific amount. It is typically used to track and display incremental changes.
__Decrement Counter:__ It lets the user update the name value to a new string. It's useful for scenarios where dynamic updates to a displayed name are required.
## Structure
```
├─ public
│ └─ images - store images
│
├─ redux
│ ├─ store.js - sets up the Redux store, combining all the reducers and applying any middleware.
│ └─ features
| ├─ counter
| | └─ counterSlice.js - contain slices of counter state
| |
| └─ name
| └─ nameSlice.js - contain slices of counter state
│
├─ src
│ ├─ App.jsx - main application component that typically includes routing and other high-level logic. It use selector funtionalities
│ ├─ Child.jsx - component that use dispatch
│ ├─ Parent.jsx - component that help to increase tree size
│ ├─ SuperParent.jsx - component that help to increase tree size
│ └─ main.jsx - entry point file where the React application is rendered and the Redux provider is set up.
│
├─ .eslintrc.cjs - configuration for eslint
├─ .gitignore - store details about ingnored file by git
├─ README.md - serve a details documentation
├─ index.html - main HTML file for the application. It typically includes a
where your React app will be mounted. Vite injects the necessary scripts into this file.
├─ package-lock.json - contains metadata about dependencies, scripts, and other configurations
├─ package.json - contains metadata about dependencies, scripts, and other configurations.
├─ preview.png - preview image
├─ vercel.json - configuration for vercel
└─ vite.config.js - configuration for vite
```