Redux toolkit

commentsSlice.js

import {createSlice, createAsyncThunk} from '@reduxjs/toolkit';
import {API_URL} from '@env';
import {apiUrl} from '../API';

export const getComments = createAsyncThunk(
  'comments/getComments',
  async (arg = {}, thunkAPI) => {
    let params = new URLSearchParams(arg).toString();
    return fetch(apiUrl.getComments() + `?${params}`).then(res => res.json());
  },
);

export const getAllComments = createAsyncThunk(
  'comments/getAllComments', 
  async (arg={}, thunkAPI) => {
    return fetch('baseurl/api/comments');
  }
)

// In activitySlice.js
export const getActivities = createAsyncThunk(
  'activities/getActivities',
  async (arg={}, thunkAPI) => {
    const selectedRequest = thunkAPI.getState().requests.selectedRequest;
    if(!selectedRequest) {
      return;
    }
    let url = `https://api.crm.digitalrenter.com/api/requests/${selectedRequest.id}/activity`;
    return fetch(url);
  }
)


const initialState = {
  requests: [],
  requestTypes: [],
  // activities: [],
  // reminders: [],
  selectedRequest: null,
  limit: null,
  processing: false,
  httpError: null,
};

export const commentsSlice = createSlice({
  name: 'comments',
  initialState,
  reducers: {
    resetComments: (state, action) => {
      state = initialState;
    },
    setSelectedRequest: (state, action) => {
      state.selectedRequest = action.payload;
    }
  },
  extraReducers: builder => {
    // Get comments
    builder.addCase(getComments.pending, (state, action) => {
      state.processing = true;
      state.httpError = null;
    });
    builder.addCase(getComments.fulfilled, (state, action) => {
      state.comments = action.payload;
      state.processing = false;
    });
    builder.addCase(getComments.rejected, (state, action) => {
      state.processing = false;
      state.httpError = action.payload;
      alert('Error fetching comments');
    });

    builder.addCase(getAllComments.pending, (state, action) => {
      state.pending = true;
    })
    builder.addCase(getAllComments.fulfilled, (state, action) => {
      state.comments = action.payload;
      state.processing = false; 
    })
    builder.addCase(getAllComments.rejected, (state, action) => {
      state.pending = false;
      state.httpError = action.payload;
    })
  },
});

export const {resetComments, setSelectedRequest} =
  commentsSlice.actions;
export default commentsSlice.reducer;

HandleData.js

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getComments, setSelectedRequest } from '../redux/commentsSlice';
const HandleData = () => {

    const dispatch = useDispatch();
    const { comments, processing, httpError } = useSelector(state => state.comments);
    useEffect(() => {
        dispatch(getComments());
    }, []);

    const setNewRequest = (comment) => {
        dispatch(setSelectedRequest(comment));
    }

    return (
        <div>
            <h1>THis is me</h1>
            {processing && <p>Loading request</p>}
            {(!processing && httpError) && <p>{httpError}</p>}
            {comments.map(comment => <button onClick={() => setNewRequest(comment)}>{comment.title}</button>)}
        </div>
    )
}

const Activities = () => {
    const { activities, processing, httpError } = useSelector(state => state.activities)
    const { selectedRequest } = useSelector(state => state.requests);
    const [user, setUser] = useState();

    useEffect(() => {
        dispatch(getActivities());
    }, [selectedRequest, user]);

    useEffect(() => {
        if (!user) {
            dispatch(logout());
        }
    }, [user]);

    return (
        <div>
            <p>List of activities</p>
            {processing && <p>Loading activities</p>}
            {(!processing && httpError) && <p>{httpError}</p>}
            {activities.map(activity => <button onClick={() => setNewRequest(activity)}>{activity.title}</button>)}
        </div>
    )
}

const StatusBar = () => {
    const selectedRequest = useSelector(state => state.requests.selectedRequest);
    if (!selectedRequest) {
        return null; 
    }

    return jsx data
}


export default HandleData;

store.js

import commentsSlice from './commentsSlice';

export const store = configureStore({
  reducer: {
    comments: commentsSlice,
  },
});