How to have a well documented file with createSlice from redux-toolkit

Viewed 373

I am developing my first application with react native using typescript and redux-toolkit (mainly with createSlice).
It seems that I am using what is considered to be good practice today, but in the end I do not find it really readable (I point out that I am an experienced developer and that I have practiced many other languages. just new to React native, then i'm used to have good practices of coding and well-documented code), and can't find a good way to generate efficient documentation from code and comments (I tried typedoc).
Does anyone have any advice on this, ideally a well-readable sample redux-toolkit slice file?

To illustrate, here is an example of what my file looks like today. I added comments to the reducer 'refreshEventsList', through this is not detected as doc by typedoc.

import {createAsyncThunk, createSlice, PayloadAction} from '@reduxjs/toolkit';
import {callAPI} from '../../api/APIManager';

export interface EventType {
  id: string;
  title: string;
}

interface EventsState {
  events: EventType[];
}

const initialState = {events: []} as EventsState;

/**
 * Load all events and update intern events data
 */
export const loadEvents = createAsyncThunk('events/fetchAll', async () => {
  const response = await callAPI({path: 'api/test'});
  return response.data as EventType[];
});

const eventsSlice = createSlice({
  name: 'events',
  initialState,
  reducers: {
    /**
     * Refresh internal data from provided payload.
     * @param state
     * @param action
     */
    refreshEventsList(state, action: PayloadAction<any[]>) {
      state.events = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(loadEvents.pending, (state, action) => {
      console.log('PENDING');
    });
    builder.addCase(loadEvents.fulfilled, (state, action) => {
      state.events = action.payload;
    });
  },
});

export const {refreshEventsList} = eventsSlice.actions;
export default eventsSlice.reducer;

Is there a way to have rather a list of functions, that's seems more readable and cleaner to me, like this or similar ? :

   /**
     * Load all events and update intern events data
     */
    loadEvents(....

   /**
     * Refresh internal data from provided payload.
     * @param state
     * @param action
     */
     refreshEventsList(...

How do you deal with this ? what is the common path to follow to manage that?

0 Answers
Related