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.

Practice

1. What is the main purpose of a Redux slice in a React Native app?

easy

A. To create UI components automatically

B. To style the app with CSS

C. To handle navigation between screens

D. To group related state and actions together for easier management

Solution

1. Step 1: Understand Redux slice role

   A slice groups state and actions related to a feature in one place.

2. Step 2: Compare with other options

   Options A, C, and D are unrelated to state management.

3. Final Answer:

   To group related state and actions together for easier management -> Option D

4. Quick Check:

   Redux slice = group state and actions [OK]

Hint: Slices bundle state and actions for one feature [OK]

Common Mistakes:

• Confusing slices with UI components
• Thinking slices handle navigation
• Assuming slices style the app

2. Which of the following is the correct way to define an action inside a Redux slice using createSlice?

easy

A. reducers: { increment: (state) => { state.value += 1 } }

B. actions: { increment: () => state.value += 1 }

C. reducers: { increment: () => state.value += 1 }

D. actions: { increment: (state) => { return state.value + 1 } }

Solution

1. Step 1: Recall createSlice syntax

   Reducers are defined as functions with (state) parameter that mutate state directly.

2. Step 2: Check each option

   reducers: { increment: (state) => { state.value += 1 } } correctly uses reducers with state mutation. Options B and D wrongly use 'actions' key. reducers: { increment: () => state.value += 1 } uses arrow function without braces, which won't mutate state properly.

3. Final Answer:

   reducers: { increment: (state) => { state.value += 1 } } -> Option A

4. Quick Check:

   Reducers mutate state inside createSlice [OK]

Hint: Reducers mutate state; actions key is not used in createSlice [OK]

Common Mistakes:

• Using 'actions' instead of 'reducers' key
• Not mutating state directly inside reducer
• Returning new state instead of mutating

3. Given this slice code:

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

const state = { value: 5 };
counterSlice.reducer(state, { type: 'counter/increment' });
console.log(state.value);

What will be logged to the console?

medium

A. 6

B. 5

C. NaN

D. Error

Solution

1. Step 1: Understand reducer call

   The reducer receives state { value: 5 } and action type 'counter/increment'. It runs increment reducer which adds 1 to state.value.

2. Step 2: Calculate new state value

   5 + 1 = 6, so state.value becomes 6.

3. Final Answer:

   6 -> Option A

4. Quick Check:

   Increment action adds 1 to value [OK]

Hint: Reducer mutates state.value by +1 on increment action [OK]

Common Mistakes:

• Thinking state is immutable and unchanged
• Confusing action type format
• Expecting error due to direct mutation

4. You wrote this slice but dispatching the action does not update the state:

const todoSlice = createSlice({
  name: 'todo',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    }
  }
});

// Later in component
dispatch(todoSlice.actions.addTodo('Buy milk'));

What is the most likely reason the UI does not update?

medium

A. The reducer mutates state directly which is not allowed

B. The initialState should be an object, not an array

C. The slice reducer is not added to the store

D. The action payload is missing

Solution

1. Step 1: Check reducer code

   The reducer correctly mutates state array by pushing new todo, which is allowed with Immer in createSlice.

2. Step 2: Identify missing integration

   If UI does not update, likely the slice reducer is not connected to the Redux store, so dispatch has no effect.

3. Final Answer:

   The slice reducer is not added to the store -> Option C

4. Quick Check:

   Reducer must be in store for dispatch to update state [OK]

Hint: Always add slice reducer to store for updates [OK]

Common Mistakes:

• Thinking direct mutation is forbidden in createSlice
• Assuming initialState must be object
• Forgetting to add reducer to store

5. You want to create a Redux slice that manages a list of users and includes an action to update a user's name by id. Which code snippet correctly implements this?

hard

A. reducers: { updateName: (state, action) => { state.filter(u => u.id !== action.payload.id).push(action.payload); } }

B. reducers: { updateName: (state, action) => { const user = state.find(u => u.id === action.payload.id); if(user) { user.name = action.payload.name; } } }

C. reducers: { updateName: (state, action) => { state = state.map(u => u.id === action.payload.id ? { ...u, name: action.payload.name } : u); } }

D. reducers: { updateName: (state, action) => { state.map(u => u.id === action.payload.id ? { ...u, name: action.payload.name } : u); } }

Solution

1. Step 1: Understand mutation in createSlice

   Reducers can mutate state directly because Immer handles immutability internally.

2. Step 2: Analyze each option

   reducers: { updateName: (state, action) => { const user = state.find(u => u.id === action.payload.id); if(user) { user.name = action.payload.name; } } } finds user by id and mutates name directly, which is correct. reducers: { updateName: (state, action) => { state.map(u => u.id === action.payload.id ? { ...u, name: action.payload.name } : u); } } executes map but discards the new array without returning it or mutating state, incorrect. reducers: { updateName: (state, action) => { state = state.map(u => u.id === action.payload.id ? { ...u, name: action.payload.name } : u); } } tries to assign new array to state variable, which does not update state correctly. reducers: { updateName: (state, action) => { state.filter(u => u.id !== action.payload.id).push(action.payload); } } filters out user and pushes new one, which mutates array incorrectly and may cause bugs.

3. Final Answer:

   reducers: { updateName: (state, action) => { const user = state.find(u => u.id === action.payload.id); if(user) { user.name = action.payload.name; } } } -> Option B

4. Quick Check:

   Direct mutation with find and update is correct in createSlice [OK]

Hint: Use find and mutate user directly inside reducer [OK]

Common Mistakes:

• Trying to reassign state variable inside reducer
• Using filter and push incorrectly
• Not mutating state directly in createSlice