Redux Toolkit setup in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct Redux Toolkit store setup

Which option correctly creates a Redux store using Redux Toolkit's configureStore with a single reducer named counter?

React Native

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

A const store = configureStore({ reducer: { counter: counterReducer } });

B const store = configureStore(counterReducer);

C const store = configureStore({ reducer: counterReducer });

D const store = configureStore({ reducers: { counter: counterReducer } });

💡 Hint

Remember that configureStore expects an object with a reducer property that is an object mapping slice names to reducers.

Option A correctly passes an object with a reducer property containing the counter slice reducer. Option A passes the reducer directly, which is invalid. Option A passes the reducer directly without wrapping in an object. Option A uses reducers instead of reducer, which is incorrect.

❓ ui_behavior

intermediate

Redux Toolkit slice initial state behavior

Given this slice setup, what is the initial value of state.value when the app starts?

React Native

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

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

A 0

B undefined

C null

D 10

💡 Hint

Look at the initialState property inside the slice.

The initialState is set to an object with value: 10, so the initial state.value is 10.

❓ lifecycle

advanced

When does Redux Toolkit's createSlice reducer get called?

In a React Native app using Redux Toolkit, when is the reducer function inside createSlice called?

A Only when the store is created

B Only once during app initialization

C Every time an action matching the slice's reducers is dispatched

D When the React component mounts

💡 Hint

Reducers respond to dispatched actions to update state.

Reducers created by createSlice run every time an action matching their name is dispatched to update the state accordingly.

❓ navigation

advanced

Connecting Redux store to React Native app

Which option correctly wraps the React Native app with the Redux Provider to make the store available?

React Native

import { Provider } from 'react-redux';
import store from './store';
import App from './App';

A <Provider store={store}><App /></Provider>

B <App><Provider store={store} /></App>

C <App store={store} />

D <Provider><App store={store} /></Provider>

💡 Hint

The Provider must wrap the entire app component tree.

Option A correctly wraps App inside Provider passing the store as a prop. Other options either pass the store incorrectly or do not wrap the app properly.

🔧 Debug

expert

Why does dispatching an action not update state?

Given this slice and store setup, why does dispatching increment() not update the UI?

React Native

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

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

const store = configureStore({
  reducer: counterSlice.reducer
});

// In component
// dispatch(counterSlice.actions.increment());
// useSelector(state => state.counter.value);

A The increment reducer mutates state directly, which is not allowed

B The store reducer is not an object with slice name keys, so state shape is incorrect

C The action is not dispatched correctly because increment is not exported

D The initialState is missing, so state is undefined

💡 Hint

Check how the store reducer is configured and how the state is accessed in useSelector.

The store reducer is set directly to the slice reducer function, so the state shape is just the value object. But the component tries to access state.counter.value, which is undefined. The reducer should be passed as an object with key 'counter' to match the state shape.