https://github.com/theprojectsx/shopping-state-redux-test
Redux test Project
https://github.com/theprojectsx/shopping-state-redux-test
Last synced: about 1 year ago
JSON representation
Redux test Project
- Host: GitHub
- URL: https://github.com/theprojectsx/shopping-state-redux-test
- Owner: TheProjectsX
- Created: 2025-04-08T18:25:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-09T10:05:27.000Z (about 1 year ago)
- Last Synced: 2025-04-09T11:22:41.578Z (about 1 year ago)
- Language: JavaScript
- Size: 35.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Redux Store Setup Guide
This project uses Redux Toolkit with the following structure inside the `src/` folder:
```
src/
└── store/
├── app/
│ └── store.js # Redux store setup
└── features/
└── featureName/
└── featureSlice.js # Feature-specific slice
```
---
## 🛠️ Installation
Install required packages:
```bash
npm install @reduxjs/toolkit react-redux
```
---
## ⚙️ Setup Steps
### 1. Create the Redux Store
**`src/store/app/store.js`**
```js
import { configureStore } from "@reduxjs/toolkit";
import featureReducer from "../features/featureName/featureSlice";
export const store = configureStore({
reducer: {
feature: featureReducer,
// add more features here
},
});
```
---
### 2. Provide the Store
Wrap your app with the `Provider`:
```js
import { StrictMode } from "react";
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/app/store';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
```
---
### 3. Create a Slice
**`src/store/features/featureName/featureSlice.js`**
```js
import { createSlice } from "@reduxjs/toolkit";
const featureSlice = createSlice({
name: "feature",
initialState: {},
reducers: {
yourAction: (state, action) => {
// reducer logic here
},
},
});
export const { yourAction } = featureSlice.actions;
export default featureSlice.reducer;
```
---
### ✅ Done