Redux
Intermediate

Action Creators & Payload

Understand how action creators work and how to customize payload preparation.

20 min
2 sections
actions
payload
prepare
1
2

01. Default Payload Handling

Section 1 of 2

Action creators generated by createSlice automatically pass their argument as action.payload.

typescript
// Action: incrementBy(5)
// Generated action: { type: 'counter/incrementBy', payload: 5 }

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    incrementBy: (state, action) => {
      state.value += action.payload;
    },
  },
});
Back to Course