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?