Is there a way to separate reducer actions in a different file from createSclice in redux?

Viewed 11

I have this redux slice setup in store/slices/sourcesSlice.ts

import { addInitialSources} from "store/slices/sourcesActions.ts";
export const sourcesSlice = createSlice({
  name: "sourcesSlice",
  initialState,
  reducers: {
    addSource: (state, action: PayloadAction<SourceInterface>) => {
      state.sources.push(action.payload);
    },
    changeName: (state) => {
      state.naming = "Bob Marley";
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(addInitialSources.fulfilled, (state, { payload }) => {
        state.loading = false;
        state.sources = payload;
      }) 
  },
});
export const { addSource, changeName } = sourcesSlice.actions;

Note how I have a number of actions in store/slices/sourcesSlice.ts and a number of actions in store/slices/sourcesActions.ts

All addSource, changeName, addInitialSources are related actions. **Shouldn't they all be accessible from one endpoint? So when I import any of those, I think it's cleaner, easier to remember if I can do this

import { addInitialSources, addSource, changeName} from "store/slices/sourcesActions.ts";

Rather than this

import { addInitialSources} from "store/slices/sourcesActions.ts";
import { addSource, changeName} from "store/slices/sourcesSlice.ts";

Is such a thing possible? To leave export const sourcesSlice = createSlice... in sourcesSlice.ts but to call all the actions from sourcesActions.ts

AND IS IT RECOMMENDED

0 Answers
Related