useReducer hook in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useReducer hook from React.

React Native

import React, { [1] } from 'react';

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

AuseReducer

BuseEffect

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useState instead of useReducer

Forgetting to import useReducer

The useReducer hook is imported from React to manage complex state logic.

2fill in blank

medium

Complete the code to initialize the useReducer hook with a reducer and initial state.

React Native

const [state, dispatch] = useReducer([1], { count: 0 });

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

Areducer

BinitialState

CuseState

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Passing initial state as first argument

Passing useState instead of reducer

The first argument to useReducer is the reducer function that updates state.

3fill in blank

hard

Fix the error in the reducer function to correctly update the count on 'increment' action.

React Native

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count [1] 1 };
    default:
      return state;
  }
}

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

A/

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using minus instead of plus

Using multiplication or division

The reducer should add 1 to the current count when the action type is 'increment'.

4fill in blank

hard

Fill both blanks to dispatch an 'increment' action when the button is pressed.

React Native

return (
  <Button title="Increment" onPress={() => [1]([2])} />
);

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

Adispatch

B{ type: 'increment' }

C{ increment: true }

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Using setState instead of dispatch

Wrong action object shape

To update state with useReducer, call dispatch with an action object having a type.

5fill in blank

hard

Fill all three blanks to create a reducer that handles 'increment' and 'decrement' actions.

React Native

function reducer(state, action) {
  switch (action.type) {
    case [1]:
      return { count: state.count + 1 };
    case [2]:
      return { count: state.count - 1 };
    default:
      return [3];
  }
}

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

A'increment'

B'decrement'

Cstate

D'reset'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong strings for action types

Returning wrong value in default case

The reducer must match action types as strings and return the current state by default.