JS Built-ins
← redux-toolkit22 / 22
redux-toolkitcreateSliceadvanced

Full Counter Application

📖 Usage Example
const { createSlice, configureStore, createSelector } = ReduxToolkit
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0, history: [] },
  reducers: {
    increment: state => { state.history.push(state.value); state.value += 1 },
  },
})

Combining createSlice, configureStore, and createSelector gives you a complete, production-ready Redux feature module.

Full Counter Application

Put it all together: slice, store, selectors, and actions. A real counter that tracks a history of previous values.

Challenge: Implement a counter slice with increment, decrement, and reset reducers. Each mutating action should push the current value to history first. Create memoized selectors selectValue and selectHistoryLength.

💡 Hints (3)
  • • Use `state.history.push(state.value)` before mutating `state.value`.
  • • The `reset` reducer can use Immer mutations: `state.value = 0; state.history = []`.
  • • `createSelector(selectHistory, h => h.length)` memoizes based on array reference.