$3

When passing your reducers to configureStore(), use the custom combineSlices() implementation of effin-redux:

``typescript
// app.ts
const slices = [counterSlice, infoSlice, fizzBuzzSlice] as const; // const is mandatory, and the order matters
const appReducer = combineSlices(slices);
export const store = configureStore({ reducer: appReducer });
export type AppState = ReturnType
`

Make sure to also create the helpers that allow reading the state of other slices:

`typescript
export const { readAppState, readOriginalAppState } = getHelpers();
`

In your slices, you can use these helpers to get access to the root state, not just the slice's state:

`typescript
// slices/fizzBuzz.ts
import { readAppState } from "$app";

export const fizzBuzzSlice = createSlice({
name: "fizzBuzz",
initialState,
reducers: {},
extraReducers: (builder) => builder.addMatcher(
(action) => action.type.startsWith("counter"),
(state) => {
// state only refers to the state of this one slice
// but with readAppState, you can get access to the state of other slices too:
const appState = readAppState(state);
const currentNumber = appState.counter.count;
state.value = calculateFizzBuzz(currentNumber);
},
),
});
`

#### Note:
- readAppState() returns the instance of the state which could already have been modified by any other slices during the handling of this action. If you use it, be aware that the order in which your slices are executed matters.
- readOriginalAppState() returns the app state from before any slice reducers have been executed. If you only use this one, the order of your reducer slices does not matter.

#### References

- combineReducers (redux docs)
- reduceReducers (github)
- Redux FAQ entry about sharing state between reducers

Use the provided configureStore() implementation to get side effects:
`typescript
import { configureStore } from "effin-redux";

export const store = configureStore(appReducer);
`

Alternatively, if you need to use the original configureStore() function from redux-toolkit, you can patch your reducer manually via effin-redux's withEffects() helper:

`typescript
import { withEffects } from "effin-redux";

export const store = configureStore({ reducer: withEffects(appReducer) });
`

Define your effects for your slices:

`typescript
import { createEffectInputs, createEffects, forSlice, addEffect } from "effin-redux";

const inputs = createEffectInputs()({
fetchExternalNumber: () => {
return fetch("https://www.randomnumberapi.com/api/v1.0/random?count=1")
.then((response) => response.json())
.then((parsedResponse: [number]) => {
return parsedResponse[0];
});
},
setSpecificNumber: async ({ requestedNumber }: { requestedNumber: number }) => {
return { requestedNumber };
},
});

const effects = createEffects()(inputs, forSlice("counter"));
`

Then schedule them in your reducer:

`typescript
export const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
externalNumberRequested: (state) => {
addEffect(state, effects.fetchExternalNumber());
addEffect(state, effects.consoleLog());
},
specificNumberRequested: (state, action: PayloadAction<{ requestedNumber: number }>) => {
addEffect(state, effects.setSpecificNumber({ requestedNumber: action.payload.requestedNumber }));
},
}),
`

And handle them like any other async thunk:
`typescript
extraReducers: (builder) =>
builder
.addCase(effects.fetchExternalNumber.pending, (state) => {
state.isWaitingForExternalNumber = true;
})
.addCase(effects.fetchExternalNumber.fulfilled, (state, action) => {
state.isWaitingForExternalNumber = false;
state.count = action.payload;
})
.addCase(effects.setSpecificNumber.fulfilled, (state, action) => {
state.count = action.payload.requestedNumber;
}),
),
});
`

Using the Redux Developer Tools, you will be able to inspect what effects has been scheduled by your reducer, and also when it is being executed.

#### References

- How can I represent side effects such as AJAX calls? (redux docs)
- Trying to put side effects in the correct place (redux github issue)

Just wrap your slices' reducers and extraReducers with the appropriate helpers:
`typescript
import { createExtraReducers, createReducers } from "effin-redux";

export const counterSlice = createSlice({
name: "counter",
initialState,
reducers: createReducers()({
// ...case reducers
}),
extraReducers: createExtraReducers((builder) => {
// ...extra reducers
}),
});
`

#### References

- State argument on createSlice is no longer inferred with typescript beta 4.8 and they do not plan to fix it (redux-toolkit github issue)