Web Unit 3 Sprint 10 - Redux & State Management

Getting Started

1. Clone the challenge repository from GitHub
2. Run npm install to install dependencies
3. Review the provided README.md for specific setup instructions
4. Run npm start to start the development server
5. Begin implementing the requirements outlined below

1. Redux Toolkit Implementation

• Set up a Redux store using configureStore
• Create and organize Redux slices with createSlice
• Implement reducers for managing application state
• Structure your application with a proper Redux architecture

// Example Redux store setup
import { configureStore } from '@reduxjs/toolkit';
import postsReducer from './features/posts/postsSlice';
import commentsReducer from './features/comments/commentsSlice';
import { apiSlice } from './api/apiSlice';

export const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

2. Asynchronous Actions with Redux Thunk

• Create thunk action creators for handling API requests
• Implement loading states and error handling
• Dispatch multiple actions from thunks when necessary
• Manage complex data flows across your application

// Example thunk action
export const fetchPosts = createAsyncThunk(
  'posts/fetchPosts',
  async (_, { rejectWithValue }) => {
    try {
      const response = await axios.get('/api/posts');
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

3. RTK Query Implementation

• Create an API slice using createApi
• Define endpoints for CRUD operations
• Implement data transformation with transformResponse
• Set up cache invalidation with tags
• Use hooks generated by RTK Query in your components

// Example RTK Query setup
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Post', 'Comment'],
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
      providesTags: ['Post']
    }),
    addPost: builder.mutation({
      query: (post) => ({
        url: '/posts',
        method: 'POST',
        body: post
      }),
      invalidatesTags: ['Post']
    })
  })
});

4. React Components and Integration

• Properly connect React components to Redux state
• Use Redux hooks (useSelector, useDispatch) effectively
• Implement proper component structure
• Handle UI state based on Redux data
• Create responsive and user-friendly interfaces