Code splitting createSlice

[Gambitboy]

Hi I have a slice that looks like this.

export const slice = createSlice({
  name: 'slice',
  initialState,
  reducer: {
    ... // bunch of actions in here
  }
})

I have a bunch of actions inside that reducer object. And I would like to extract them all to a separate file, maybe called slice.actions.js

Just to make the code a bit cleaner and readable.

I've looked at a bunch of resources, and haven't found what I'm looking for.

Is this possible?

[phryneas]

Honestly, if you take all actions out of that file and put them into one new file, your new file will be 10 lines shorter.

Generally, these reducers are just functions. You can declare them wherever you want, import them and just put them into the reducers object here. But at that point you will have to annotate them with types manually if you are using TypeScript.

Personally I'd rather extract some common code into functions that you call from those case reducers.

[Gambitboy]

So unless I'm using the idea of these actions wrong. I have quite a few of them and they're quite large sets of code. So for me, it would save like 150+ lines of code to scroll through. Atm, my file is at 226 lines.

But based on what you're saying, can I simply just move them out and import them all like this:

reducers: {
  functionOne,
  functionTwo,
 ...
}

[phryneas]

Yes. Personally I would not call a file of 200 lines long, but of course your mileage may vary :)

[Gambitboy]

I would just like to split them a bit.

But I got it to work by just extracting, putting them in an object, and importing that object into the reducer parameter of createSlice,

Thanks for the assist