Unit 6: Redux, Debugging and Deployment - Practice Quiz

INT252 — Web App Development With Reactjs 50 Questions
0 Correct 0 Wrong 50 Left
0/50

1 What is Redux primarily used for in a React application?

A. Routing
B. State management
C. Database management
D. Server-side rendering

2 Which of the following is NOT one of the three fundamental principles of Redux?

A. State is distributed across components
B. Changes are made with pure functions
C. State is read-only
D. Single source of truth

3 In Redux, what is the 'Store'?

A. A component that renders UI
B. An object that holds the application state
C. A middleware for API calls
D. A function that changes state

4 What is the purpose of a 'Reducer' in Redux?

A. To reduce the size of the bundle
B. To send data to the server
C. To specify how the application's state changes in response to actions
D. To connect React components to the DOM

5 What is the only way to change the state inside a Redux store?

A. Dispatching an action
B. Using the setState method
C. Calling the reducer function directly
D. Directly modifying the state object

6 What is an 'Action' in Redux?

A. A function that returns a component
B. A method inside a class component
C. A plain JavaScript object that describes what happened
D. A connection to the database

7 Which property is mandatory in a Redux Action object?

A. id
B. type
C. data
D. payload

8 Which library is commonly used to bind Redux with React?

A. react-redux
B. axios
C. react-router-dom
D. redux-thunk

9 What is the purpose of the <Provider> component in react-redux?

A. To provide routing capabilities
B. To make the Redux store available to any nested components
C. To provide API data to components
D. To debug the application

10 Which prop must be passed to the <Provider> component?

A. state
B. reducer
C. action
D. store

11 What is the correct signature of a Reducer function?

A. (state, action) => void
B. (action, state) => newState
C. (state, action) => newState
D. (state) => newState

12 Why must Reducers be 'pure functions'?

A. To allow side effects like API calls
B. To ensure predictable state changes without mutations
C. To allow direct DOM manipulation
D. To ensure the UI renders faster

13 Which method is used to send an action to the store?

A. store.dispatch()
B. store.update()
C. store.send()
D. store.push()

14 What is an 'Action Creator'?

A. A function that creates the Redux store
B. A function that returns an action object
C. A component that triggers an event
D. A function that connects components

15 In the connect function connect(mapStateToProps, mapDispatchToProps)(MyComponent), what is the purpose of mapStateToProps?

A. To map React props to Redux actions
B. To extract data from the Redux store and pass it as props to the component
C. To connect the component to the router
D. To initialize local component state

16 Which React-Redux hook is synonymous with mapStateToProps?

A. useStore
B. useDispatch
C. useReducer
D. useSelector

17 Which React-Redux hook is used to dispatch actions?

A. useSend
B. useSelector
C. useDispatch
D. useAction

18 What is the typical initial value of the state in a Reducer?

A. The entire database
B. Defined via a default parameter
C. Undefined
D. Null

19 What function is used to combine multiple reducers into a single root reducer?

A. rootReducer
B. joinReducers
C. combineReducers
D. mergeReducers

20 In the Redux flow, what happens immediately after an action is dispatched?

A. The store calls the reducer function
B. The action is sent to the server
C. The component re-renders
D. The view updates

21 What should a reducer return if it receives an action type it does not handle?

A. undefined
B. The current state
C. An empty object
D. null

22 Which statement regarding Redux state immutability is true?

A. You should return a new object/array using spread operators or similar techniques
B. You should use state.value = 5 to update values
C. Redux automatically handles mutation for you
D. You should use state.push() to add items to an array

23 What is the 'payload' in an action?

A. The store object
B. The type of the action
C. The reducer function
D. Additional data needed to update the state

24 Which tool is widely used for debugging Redux applications in the browser?

A. Redux DevTools Extension
B. Chrome Task Manager
C. React Developer Tools
D. Node Debugger

25 What is 'Time Travel Debugging' in Redux?

A. Jumping back and forth between different states recorded by the DevTools
B. Setting breakpoints in the future
C. Running the app in a slower timeframe
D. Predicting future states using AI

26 Which npm command is typically used to build a React app for production?

A. npm test
B. npm run build
C. npm start
D. npm run deploy

27 What is the main advantage of the 'production build' of a React app?

A. It includes full error logging
B. It runs on a development server
C. It is minified and optimized for performance
D. It includes hot reloading

28 Where are the production files typically stored after running the build command?

A. /public
B. /src
C. /build or /dist
D. /node_modules

29 What is a 'store subscriber'?

A. A component that dispatches actions
B. A library for routing
C. A user who pays for the app
D. A function that runs whenever the state is updated

30 When debugging a React app, what does 'Source Map' allow you to do?

A. Map API endpoints to routes
B. Visualise the component tree structure
C. View the original source code instead of the minified code in the browser
D. Map components to Redux store

31 In mapDispatchToProps, if the argument is an object of action creators, what does connect do automatically?

A. It calls the reducers
B. It ignores them
C. It wraps the action creators in a dispatch call
D. It validates the prop types

32 What is the file 'index.js' (or main.jsx) typically used for in a Redux setup?

A. Rendering the App component wrapped in the Provider
B. Creating action creators
C. Defining all reducers
D. Storing CSS styles

33 What is 'Redux Middleware'?

A. A database driver
B. A CSS framework
C. A tool for server-side rendering
D. Software that sits between the dispatching of an action and the moment it reaches the reducer

34 Which of the following is a common middleware used for async actions in Redux?

A. Redux-Router
B. Redux-DevTools
C. Redux-Thunk
D. Redux-Sync

35 If a React app crashes in production, which React feature can display a fallback UI instead of the crash?

A. Try-Catch Blocks in render
B. Service Workers
C. Error Boundaries
D. Redux Store

36 What does process.env.NODE_ENV usually return in a production build?

A. 'test'
B. 'debug'
C. 'development'
D. 'production'

37 When connecting a component, what happens if you pass null instead of mapStateToProps?

A. The component receives the whole state
B. The component will not receive dispatch prop
C. The component will not subscribe to store updates
D. The application will crash

38 What is the purpose of bindActionCreators?

A. To bind this context to components
B. To combine multiple reducers
C. To wrap action creators in dispatch so they can be invoked directly
D. To create the store

39 Which folder in a standard React structure usually contains Redux logic?

A. /assets
B. /redux or /store
C. /features
D. /public

40 Why is using console.log for debugging sometimes inefficient in Redux?

A. It stops the code execution
B. It is not supported in Chrome
C. It cannot print objects
D. It clutters the code and doesn't show the state history easily compared to DevTools

41 In the Flux architecture (which Redux simplifies), flow is always:

A. Bi-directional
B. Random
C. Unidirectional
D. Recursive

42 How can you access the Redux store directly (though not recommended for UI rendering) outside of a component?

A. import store and use store.getState()
B. window.store
C. React.useStore()
D. You cannot access it

43 What is 'Hot Module Replacement' (HMR) helpful for?

A. Deploying the app to a server
B. Swapping modules in a running app without a full reload during development
C. Encrypting data
D. Replacing the Redux store in production

44 Which method allows you to unsubscribe a listener from the store?

A. store.removeListener()
B. store.off()
C. The function returned by store.subscribe()
D. store.unsubscribe()

45 When preparing for deployment, what is 'minification'?

A. Converting React to HTML
B. Reducing the functionality of the app
C. Compressing images only
D. Removing unused code, shortening variable names, and removing whitespace

46 Which hook would you use to perform a side-effect (like data fetching) in a functional component before dispatching an action?

A. useEffect
B. useReducer
C. useState
D. useMemo

47 What is the concept of 'Single Source of Truth' in Redux?

A. The database is the only truth
B. Every component has its own store
C. The entire state of the application is stored in an object tree within a single store
D. The API is the source of truth

48 If you want to deploy your React app to a static host (like GitHub Pages or Netlify), what is the primary requirement?

A. A Docker container
B. A Node.js backend
C. The built static files (HTML, CSS, JS)
D. A MySQL database

49 What is the role of redux-logger?

A. To log every action and the next state to the console
B. To manage login state
C. To log errors to a server
D. To log user login times

50 Why shouldn't you mutate state directly (e.g., state.value++) in Redux?

A. It deletes the store
B. It makes the app slower
C. Redux won't detect the change and components won't re-render
D. It throws a syntax error