Creating a ticket booking React app involves several steps. In this example, we’ll build a simple app where users can select a movie, choose a seat, and book tickets. We’ll use Redux Toolkit for state management. This example assumes you have set up a React app using Create React App and installed Redux Toolkit.

Overview:

1. Objective:
   • Create a simple ticket booking application in React with Redux Toolkit for state management.
2. Key Features:
   • Users can select a movie from a list.
   • Users can choose seats for the selected movie.
   • The app displays a booking summary with the selected movie and seats.
3. Technologies Used:
   • React: JavaScript library for building user interfaces.
   • Redux Toolkit: Simplifies state management in React applications.
   • Create React App: A tool to set up a new React project quickly.

Implementation Steps:

1. Redux Slice (bookingSlice.js):
   • Created a Redux slice to manage the state related to the booking process.
   • Defined actions (selectMovie, toggleSeat, clearBooking) and initial state.
2. Redux Store (store.js):
   • Configured the Redux store using configureStore from Redux Toolkit.
   • Combined the reducer from the bookingSlice into the store.
3. React Components:
   • MovieList (MovieList.js):
     • Displayed a list of movies.
     • Allowed users to select a movie, triggering the selectMovie action.
   • SeatSelector (SeatSelector.js):
     • Displayed a list of seats.
     • Allowed users to toggle seat selection, triggering the toggleSeat action.
   • BookingSummary (BookingSummary.js):
     • Displayed a summary of the selected movie and seats.
     • Connected to the Redux store to retrieve the selected movie and seats.
4. App Integration (App.js):
   • Integrated the MovieList, SeatSelector, and BookingSummary components into the main App component.
5. Connect to Redux Store (index.js):
   • Wrapped the App component with the Provider from react-redux to connect it to the Redux store.
6. Styling:
   • Applied basic styles to components to enhance the visual presentation of the app.
7. Run the App:
   • Ran the React app using npm start.
   • Users can visit http://localhost:3000 to interact with the ticket booking app.

Extend the app by adding more features, such as payment processing, user authentication, or additional movie details.

Implement further styling and improve the user interface.

Enhance the app’s responsiveness for a better user experience on different devices.

This overview provides a snapshot of the ticket booking React app, and you can customize and expand it based on your specific requirements and preferences

Step 1: Set Up the Redux Store and Slice

Create a bookingSlice.js file for your Redux slice:

// bookingSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  selectedMovie: null,
  selectedSeats: [],
};

const bookingSlice = createSlice({
  name: 'booking',
  initialState,
  reducers: {
    selectMovie: (state, action) => {
      state.selectedMovie = action.payload;
    },
    toggleSeat: (state, action) => {
      const seatIndex = state.selectedSeats.indexOf(action.payload);
      if (seatIndex === -1) {
        state.selectedSeats.push(action.payload);
      } else {
        state.selectedSeats.splice(seatIndex, 1);
      }
    },
    clearBooking: (state) => {
      state.selectedMovie = null;
      state.selectedSeats = [];
    },
  },
});

export const { selectMovie, toggleSeat, clearBooking } = bookingSlice.actions;
export default bookingSlice.reducer;

Step 2: Configure the Redux Store

Create a store.js file to configure the Redux store:

// store.js
import { configureStore } from '@reduxjs/toolkit';
import bookingReducer from './bookingSlice';

export const store = configureStore({
  reducer: {
    booking: bookingReducer,
  },
});

Step 3: Create React Components

Now, you can create React components for your app. Below is a simple example:

// MovieList.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { selectMovie, clearBooking } from './bookingSlice';

const movies = [
  { id: 1, title: 'Movie 1' },
  { id: 2, title: 'Movie 2' },
  // Add more movies as needed
];

const MovieList = () => {
  const dispatch = useDispatch();

  const handleSelectMovie = (movie) => {
    dispatch(selectMovie(movie));
  };

  return (
    <div>
      <h2>Movie List</h2>
      <button onClick={() => dispatch(clearBooking())}>Clear Booking</button>
      <ul>
        {movies.map((movie) => (
          <li key={movie.id} onClick={() => handleSelectMovie(movie)}>
            {movie.title}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MovieList;

SeatSelector.js

// SeatSelector.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { toggleSeat } from './bookingSlice';

const seats = ['A1', 'A2', 'A3', 'B1', 'B2', 'B3', 'C1', 'C2', 'C3'];

const SeatSelector = () => {
  const dispatch = useDispatch();
  const selectedSeats = useSelector((state) => state.booking.selectedSeats);

  const handleToggleSeat = (seat) => {
    dispatch(toggleSeat(seat));
  };

  return (
    <div>
      <h2>Seat Selector</h2>
      <ul>
        {seats.map((seat) => (
          <li
            key={seat}
            onClick={() => handleToggleSeat(seat)}
            className={selectedSeats.includes(seat) ? 'selected' : ''}
          >
            {seat}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default SeatSelector;

BookingSummary.js

// BookingSummary.js
import React from 'react';
import { useSelector } from 'react-redux';

const BookingSummary = () => {
  const selectedMovie = useSelector((state) => state.booking.selectedMovie);
  const selectedSeats = useSelector((state) => state.booking.selectedSeats);

  return (
    <div>
      <h2>Booking Summary</h2>
      <p>Selected Movie: {selectedMovie ? selectedMovie.title : 'None'}</p>
      <p>Selected Seats: {selectedSeats.join(', ') || 'None'}</p>
    </div>
  );
};

export default BookingSummary;

Step 4: Integrate Components in App.js

Now, integrate these components in your App.js:

// App.js
import React from 'react';
import MovieList from './MovieList';
import SeatSelector from './SeatSelector';
import BookingSummary from './BookingSummary';

function App() {
  return (
    <div>
      <MovieList />
      <SeatSelector />
      <BookingSummary />
    </div>
  );
}

export default App;

Step 5: Connect the App to Redux Store

Wrap your App component with the Provider to connect it to the Redux store in index.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';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Step 6: Style the App

You can add some basic styles to your components to make the app visually appealing.

Step 7: Run Your App

npm start

Summary:

We’ve created a simple ticket booking React app using Redux Toolkit for state management. Here’s a quick overview of the key steps and components:

Redux Slice (bookingSlice.js):

• Created a Redux slice to manage the state related to the booking process.
• The slice includes actions like selectMovie, toggleSeat, and clearBooking.
• It defines the initial state with selectedMovie and selectedSeats.

Redux Store (store.js):

• Configured the Redux store using configureStore from Redux Toolkit.
• Imported and combined the reducer from the bookingSlice into the store.

React Components:

• MovieList (MovieList.js):
  • Displays a list of movies.
  • Allows users to select a movie, triggering the selectMovie action.
• SeatSelector (SeatSelector.js):
  • Displays a list of seats.
  • Allows users to toggle seat selection, triggering the toggleSeat action.
• BookingSummary (BookingSummary.js):
  • Displays a summary of the selected movie and seats.
  • Connects to the Redux store to retrieve the selected movie and seats.

App Integration (App.js):

Integrated the MovieList, SeatSelector, and BookingSummary components into the main App component.

Connect to Redux Store (index.js):

Wrapped the App component with the Provider from react-redux to connect it to the Redux store.

Run the App:

• Ran the React app using npm start.
• Users can visit http://localhost:3000 to interact with the ticket booking app.