Skip to main content

Creating actions

Now that you have your own store set up, you can proceed to create actions. The createAction function, which is used to generate actions, is available through the instance of your store. You should use this function to create actions that can then be directly invoked.

When creating actions, you can take advantage of the structure provided by Immer since it is directly implemented in createAction.

The action-creating function should return a State | void | undefined

type CreateActionReturn<State extends object> = State | void | undefined;

Creating action without payload​

type Action<State extends object> = (state: Draft<State>) => CreateActionReturn<Draft<State>>;

createAction(action: Action<State>): () => void;

Example​

import {createAction} from "./store";

// create action
const increaseCount = createAction((draftState) => {
	draftState.count = draftState.count + 1;
});

// then you can execute it
increaseCount();

Creating action with payload​

export type ActionWithPayload<State extends object, Payload> = (
    state: Draft<State>,
    payload: Payload
) => CreateActionReturn<Draft<State>>;

createAction<Payload>(action: ActionWithPayload<State, Payload>): (payload: Payload) => void;

Example​

import {createAction} from "./store";

interface SetCountPayload {
    count: number;
}

// create action
const setCount = createAction<SetCountPayload>((draftState, payload) => {
    draftState.count = payload.count;
});

// then you can execute it to update state
setCount({count: 777});