Type payload-less slice action creators to take no arguments

[denisw]

Previously, it was not possible to assign a slice action creator without payload to () => any because the type was inferred as (payload: void) => any. Now we use a conditional type for SliceActionCreator that special-cases void.

Fixes #108.

[netlify]

Deploy preview for redux-starter-kit-docs ready!

Built with commit 3d1772d

https://deploy-preview-110--redux-starter-kit-docs.netlify.com

[phryneas]

Works for me nicely!

I could go from

export const slice = createSlice<
    State,
    any,
    {
        increment: CaseReducer<State, PayloadAction<number>>;
        decrement: CaseReducer<State, PayloadAction<number>>;
        navigation: CaseReducer<State, NavigationAction<{ counter: string }>>;
    }
>({
    slice: 'home',
    reducers: {
        increment: (state, action) => {
            state.counter += action.payload;
        },
        decrement: (state, action) => {
            state.counter -= action.payload;
        },
        navigation: (state, action) => {
            state.counter = Number.parseInt(action.payload.routeParams.counter);
        }
    },
    initialState: { counter: 0 }
});

to

export const slice = createSlice({
    slice: 'home',
    reducers: {
        increment: (state, action: PayloadAction<number>) => {
            state.counter += action.payload;
        },
        decrement: (state, action: PayloadAction<number>) => {
            state.counter -= action.payload;
        },
        navigation: (state, action: NavigationAction<{ counter: string }>) => {
            state.counter = Number.parseInt(action.payload.routeParams.counter);
        }
    },
    initialState: { counter: 0 } as State
});

The only thing that is not working is defining the State type as a Generic like this (but this is only a nice-to-have):

export const slice = createSlice<State>({
    slice: 'home',
    reducers: {
        increment: (state, action: PayloadAction<number>) => {
            state.counter += action.payload;
        },
        decrement: (state, action: PayloadAction<number>) => {
            state.counter -= action.payload;
        },
        navigation: (state, action: NavigationAction<{ counter: string }>) => {
            state.counter = Number.parseInt(action.payload.routeParams.counter);
        }
    },
    initialState: { counter: 0 } 
});

[phryneas]

Actually I am noticing right now that example B seems to be working with the current version without this patch, too, so I might have never had this specific problem & been the wrong one to test this o_O

Sorry!

[pat-son]

Is there an ETA on this getting merged? When can we expect a new version of RSK?

[markerikson]

Woops, forgot this was here - sorry! I've been completely occupied with work on React-Redux v7 the last couple months. I'll try to swing back and examine this in more detail this week.

@denisw : is there any chance we can make a no-param action creator actually not try to assign payload at all? Right now, if I do something like onClick={increment}, the React event object always gets passed through as the payload, and that creates problems (React doesn't like the event object being kept around, and RSK's "no non-serializable values" middleware yells at you).

[denisw]

@markerikson I guess we could add a function which explicitly creates an action creator taking no parameters. Perhaps there could be separate createAction and createPayloadAction functions.

And alternative approach is to keep a single createAction function, but require a chained call to a method (perhaps called withPayload) if you want the action creator to take a payload.

const increment = createAction('increment')
// increment takes no payload

const multiply = createAction('multiply').withPayload()
// multiply does take a payload

In TypeScript, you would then be able to specify the payload type with the withPayload call:

const multiply = createAction('multiply').withPayload<number>()

[denisw]

Superseded by #133.