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


This Content is from Stack Overflow. Question asked by relidon

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

import { addInitialSources} from "store/slices/sourcesActions.ts";
export const sourcesSlice = createSlice({
  name: "sourcesSlice",
  reducers: {
    addSource: (state, action: PayloadAction<SourceInterface>) => {
    changeName: (state) => {
      state.naming = "Bob Marley";
  extraReducers: (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



This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?