Redux React

Overview

Redux React is a modern web application built with React, Redux, and Redux Thunk for efficient state management. This project demonstrates best practices for managing application state, user authentication, and dynamic data fetching in a scalable and maintainable way.

Table of Contents

• Features
• Tech Stack
• Prerequisites
• Setup
• Folder Structure
• Error Handling
• Contributing
• License
• Links

Features

• User Authentication: Handles user login and logout with Redux state management.
• Dynamic Data Fetching: Fetches data asynchronously using Axios and Redux Thunk.
• State Persistence: Persists Redux state across sessions using localStorage with encryption.
• Loading Indicators: Provides visual feedback during data fetching operations.
• Error Handling: Centralized error handling with user-friendly messages.

Tech Stack

• Frontend: React, Redux, Redux Thunk
• Data Fetching: Axios
• State Management: Redux
• State Persistence: localStorage with encryption
• Environment Management: dotenv

Prerequisites

Ensure you have the following installed and configured on your machine:

• Node.js: Version 14 or higher. Download here
• npm: Version 6 or higher. Download here

For installation assistance, refer to the official documentation or guides.

Setup

1. Clone the repository:

   git clone https://github.com/AchrefDevTN/redux-react.git

2. Navigate into the project directory:

   cd redux-react

3. Install dependencies:

   npm install

4. Create a .env file in the root directory: (Copy the contents below and configure your environment variables)

   REACT_APP_API_URL=http://localhost:5000
   REACT_APP_ENCRYPTION_SECRET=my-secret-key

5. Run the application:

   npm start

6. Access the application:

   • The application will be running on

   http://localhost:3000

Folder Structure

Here is an overview of the project structure:

redux-react/
│
├── public/
│   ├── index.html             # The main HTML file
│   └── favicon.ico            # Favicon for the application
│
├── src/
│   ├── components/            # Reusable React components
│   │   ├── App.js             # Main App component
│   │   ├── Dashboard.js       # Dashboard page component
│   │   └── Login.js           # Login page component
│   │
│   ├── redux/
│   │   ├── actions/           # Redux action creators
│   │   │   ├── authActions.js # Authentication actions
│   │   │   └── userActions.js # User actions
│   │   │
│   │   ├── reducers/          # Redux reducers
│   │   │   ├── authReducer.js # Authentication reducer
│   │   │   ├── userReducer.js # User reducer
│   │   │   └── rootReducer.js # Combines all reducers
│   │   │
│   │   ├── selectors/         # Redux selectors
│   │   │   ├── authSelectors.js # Authentication selectors
│   │   │   └── userSelectors.js # User selectors
│   │   │
│   │   ├── services/          # API service functions
│   │   │   ├── axiosInstance.js # Configured Axios instance
│   │   │   ├── authService.js   # Authentication service functions
│   │   │   └── userService.js   # User service functions
│   │   │
│   │   └── store.js           # Redux store configuration
│   │
│   ├── utils/                 # Utility functions and helpers
│   │   ├── encryption.js      # Functions for data encryption
│   │   └── storage.js         # Functions for handling localStorage
│   │
│   ├── index.js               # Application entry point
│   ├── App.css                # Global CSS styles
│   └── App.js                 # Main App component
│
├── .env                       # Environment variables
├── package.json               # Project metadata and dependencies
└── README.md                  # Project documentation

Error Handling

Errors are managed in Redux, with appropriate user feedback displayed in the UI. Error messages are centralized in the reducers and can be displayed in the components.

Contributing

If you have suggestions or improvements, please submit an issue or pull request. Contributions are welcome!

License

This project is licensed under the MIT License. See the LICENSE file for details.

🔗 Links

React	Redux	Axios	License