Redux slices and actions in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Redux slice with a name.

React Native

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

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

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

Acounter

Baction

Cstate

Dstore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'store' or 'state' as the slice name, which are not descriptive slice names.

Leaving the name empty or undefined.

The name property defines the slice name, which is usually descriptive like 'counter'.

2fill in blank

medium

Complete the code to add a reducer that increments the state by 1.

React Native

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

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

A-

B+=

C+

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+=' inside the reducer return statement, which is invalid here.

Using '-' or '*' which changes the state incorrectly.

The reducer returns the new state by adding 1 to the current state using the '+' operator.

3fill in blank

hard

Fix the error in the reducer to correctly update the state by incrementing it.

React Native

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

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

A+=

B+

C-=

D*=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' operator alone without assignment.

Using '-=' or '*=' which changes state incorrectly.

When using Immer in Redux Toolkit, you can mutate the state directly with state += 1;. The correct syntax is state += 1;.

4fill in blank

hard

Fill both blanks to export the action and reducer 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

Bactions

Creducer

Dreducers

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'actions' instead of the specific action name.

Exporting 'reducers' instead of 'reducer'.

The action increment is exported from counterSlice.actions. The default export is the reducer property.

5fill in blank

hard

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

React Native

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

const store = configureStore({
  reducer: {
    [1]: [2]
  }
});

export default [3];

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

Acounter

BcounterReducer

Cstore

Dreducer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reducer' as the key instead of the slice name.

Exporting something other than the store.

The store is configured with a reducer object where the key is the slice name counter and the value is the imported counterReducer. The store is exported as default.