Search⌘ K
AI Features
Home
Courses
Building Web Applications with React and ASP.NET Core

Connecting the Search Page

Explore how to connect the search page component to the Redux store in a React application. Understand using useDispatch and useSelector hooks to manage state centrally and dispatch actions. Learn to remove local state by replacing it with Redux store state for cleaner, scalable code and efficient updates.

We'll cover the following...

Steps to connect search page to store

Let’s connect the search page to the store. To do that, perform the following steps:

  1. In SearchPage.tsx, let’s add the following import statements to import the hooks we need from React Redux and types from our store:

JavaScript (JSX)
import { useSelector, useDispatch } from 'react-redux';
import {
  AppState,
  searchingQuestionsAction,
  searchedQuestionsAction,
} from './Store';

  1. Remove the QuestionData type from the import statement from QuestionsData.ts: so that it now looks like the following:

JavaScript (JSX)
import { searchQuestions } from './QuestionsData';

  1. Assign a dispatch function to the useDispatch hook:

JavaScript (JSX)
export const SearchPage = () => {
  const dispatch = useDispatch();
...
}

  1. Use the useSelector hook with a selector to get the searched questions state from the store:

JavaScript (JSX)
const dispatch = useDispatch();
const questions = useSelector(
  (state: AppState) => state.questions.searched,
);

  1. Our local questions state is now redundant, so let’s remove it by removing the highlighted lines:

JavaScript (JSX)
const [
  questions,
  setQuestions,
] = React.useState<QuestionData[] >([]);

  1. Inside the useEffect function, remove the reference to the local question state and dispatch the appropriate actions from the store:

JavaScript (JSX)
React.useEffect(() => {
  const doSearch = async (criteria: string) => {
    dispatch(searchingQuestionsAction());
    const foundResults = await searchQuestions(
      criteria,
);
    dispatch(searchedQuestionsAction(foundResults));
};
doSearch(search);
// eslint-disable-next-line react 
  //hooks/exhaustive-deps
}, [search]);

  1. In the running app, perform a search operation by entering typescript, as shown in the following screenshot:

SearchPage component connected to the Redux store
SearchPage component connected to the Redux store

The page will render correctly.

Test yourself

Press the “Run” button to see the output.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.16",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "history": "^5.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-prettier": "^3.4.1",
    "prettier": "^2.8.4"
  }
}
Connecting the search page with store

The search page is now connected to the store.

That completes connecting the required components to our Redux store.

We accessed the Redux store state by using the useSelector hook from React Redux. We passed a function into this that retrieved the appropriate piece of state we needed in the React component.

To begin the process of a state change, we invoked an action using a function returned from the useDispatch hook from React Redux. We passed the relevant action object into this function, containing information to make the state change.

Notice that we didn’t change the JSX in any of the connected components because we used the same state variable names. We have simply moved this state to the Redux store.