Redux Toolkit setup in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function needed to create a Redux store.

React Native

import { [1] } from '@reduxjs/toolkit';

Drag options to blanks, or click blank then click option'

AconfigureStore

BcreateStore

CcreateReducer

DcombineReducers

Attempts:

3 left

💡 Hint

Common Mistakes

Using createStore which is from plain Redux, not Redux Toolkit.

Confusing combineReducers with store creation.

The configureStore function from Redux Toolkit is used to create the Redux store easily with good defaults.

2fill in blank

medium

Complete the code to create a slice with a name and initial state.

React Native

const counterSlice = createSlice({
  name: 'counter',
  initialState: [1],
  reducers: {}
});

Drag options to blanks, or click blank then click option'

A{ value: 0 }

B[]

Cnull

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number directly instead of an object.

Using null or an empty array which are not suitable here.

The initial state is usually an object with properties. Here, { value: 0 } sets the starting count.

3fill in blank

hard

Fix the error in the reducer function to correctly update the state.

React Native

reducers: {
  increment: (state) => {
    state.value [1] 1;
  }
}

Drag options to blanks, or click blank then click option'

A=

B+=

C==

D++

Attempts:

3 left

💡 Hint

Common Mistakes

Using assignment = which replaces the value.

Using comparison == which does not change the value.

Using ++ which is not valid syntax here.

To increase the value by 1, use the += operator. It adds 1 to the current state value.

4fill in blank

hard

Fill both blanks to export the reducer and actions from the slice.

React Native

export const { [1] } = counterSlice.actions;
export default counterSlice.[2];

Drag options to blanks, or click blank then click option'

Aincrement

Breducer

Creducers

Dactions

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to export 'actions' directly instead of specific action names.

Using 'reducers' instead of 'reducer' for the default export.

We export the increment action from counterSlice.actions and the default export is the reducer from the slice.

5fill in blank

hard

Fill all three blanks to configure the Redux store with the counter reducer.

React Native

const store = configureStore({
  reducer: {
    [1]: [2]
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().[3]()
});

Drag options to blanks, or click blank then click option'

Acounter

BcounterReducer

Cconcat

Dprepend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'concat()' instead of 'prepend()' for middleware order.

Mixing reducer names or keys incorrectly.

The store reducer key is counter, the reducer function is counterReducer, and prepend() adds middleware at the start.