Redux slices and actions in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Redux slice state after dispatch?

Consider this Redux slice for a counter. What will be the value of state.value after dispatching increment() twice?

React Native

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 }
  }
});

const { increment } = counterSlice.actions;

let state = { value: 0 };
state = counterSlice.reducer(state, increment());
state = counterSlice.reducer(state, increment());

console.log(state.value);

A 2

B 1

C 0

D -2

💡 Hint

Each increment adds 1 to the current value.

The initial state value is 0. Each increment action adds 1, so after two increments, the value is 2.

📝 Syntax

intermediate

Which option correctly defines a Redux slice with an action to reset state?

You want to create a Redux slice with an action reset that sets state.value back to 0. Which code snippet is correct?

A const slice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { reset: (state) => { state.value = 0 } } });

B const slice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { reset: () => { state.value = 0 } } });

C const slice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { reset: (state) => { return { value: 0 } } } });

D const slice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { reset: (state) => state.value = 0 } });

💡 Hint

Reducers can mutate state directly when using createSlice.

Option A correctly uses a function with a block that mutates state.value. Option A lacks braces, causing a syntax error. Option A returns a new object which is allowed but less common here. Option A has no state parameter, so state is undefined.

❓ lifecycle

advanced

What happens if you dispatch an unknown action to a Redux slice reducer?

Given a Redux slice reducer, what is the state output if an action with type unknownAction is dispatched?

React Native

const slice = createSlice({
  name: 'test',
  initialState: { count: 5 },
  reducers: {
    add: (state) => { state.count += 1 }
  }
});

const unknownAction = { type: 'unknownAction' };
const newState = slice.reducer(slice.getInitialState(), unknownAction);
console.log(newState.count);

A undefined

B 6

C 5

D Throws an error

💡 Hint

Reducers return current state if action type is not handled.

Redux slice reducers return the current state unchanged if the action type is not recognized. So the count remains 5.

🔧 Debug

advanced

Why does this Redux slice reducer not update the state?

Look at this reducer code. Why does dispatching increment() not change state.value?

React Native

const slice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { return { value: state.value + 1 } }
  }
});

let state = slice.getInitialState();
state = slice.reducer(state, slice.actions.increment());
console.log(state.value);

A The reducer should mutate state directly; returning a new object causes state to reset to initial.

B The reducer returns a new object, but Immer ignores it, so state does not update.

C The reducer returns a new object but Immer expects mutation or full replacement; this works correctly.

D The reducer returns a new object which replaces state correctly; output will be 1.

💡 Hint

Reducers can return new state objects instead of mutating.

Returning a new object from a reducer replaces the state correctly. The output will be 1 as expected.

🧠 Conceptual

expert

Which statement about Redux Toolkit slices and actions is true?

Select the correct statement about Redux Toolkit slices and their generated actions.

A Actions generated by createSlice always require a payload argument.

B Reducers in createSlice can mutate state directly because of Immer integration.

C You must manually define action types when using createSlice.

D createSlice reducers cannot return new state objects; they must mutate state.

💡 Hint

Immer allows safe state mutation in reducers.

Redux Toolkit uses Immer, so reducers can safely mutate state directly. Actions do not always require payloads. Action types are auto-generated. Reducers can also return new state objects.