Skip to main content
2 of 2
deleted 1 character in body

Redux Toolkit Structure with TS

I've just taken the leap over to RTK instead of 'vanilla' redux and am blown away by how much less code I need to write. I'm not entirely sure how to structure my slices, however, and figured I'd ask for a small code review so I do not accidentally start breaking conventions from the start. This is how one of my slices is currently looking:

import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import bundle from '../../bundler';
import {BundleStartAction, BundleCompleteAction, BundlesState } from './bundleSliceInterface.ts'


export const createBundle = createAsyncThunk(
  'bundle',
  async (data: { cellId: string; input: string }, thunkAPI) => {
    const { cellId, input } = data;

    thunkAPI.dispatch(bundleStart({ cellId }));
    const result = await bundle(input);
    thunkAPI.dispatch(
      bundleComplete({ cellId, bundle: { code: result.code, err: result.err } })
    );
  }
);

const initialState: BundlesState = {};
const bundleSlice = createSlice({
  name: 'bundle',
  initialState,
  reducers: {
    bundleStart: (state, action: PayloadAction<BundleStartAction>) => {
      state[action.payload.cellId] = { loading: true, code: '', err: '' };
    },
    bundleComplete: (state, action: PayloadAction<BundleCompleteAction>) => {
      state[action.payload.cellId] = {
        loading: false,
        code: action.payload.bundle.code,
        err: action.payload.bundle.err,
      };
    },
  },
  extraReducers: {},
});

export const { bundleStart, bundleComplete } = bundleSlice.actions;
export default bundleSlice.reducer;

Any feedback or tips on how to structure slices properly is greatly appreciated.

Thanks in advance!