使用React Redux，当单击侧边栏上的链接(重定向)时，同时清除搜索栏中的输入

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

const searchSlice = createSlice({
  name: 'search',
  initialState: '',
  reducers: {
    updateSearchInput: (state, action) => {
      state = action.payload;
    },
    clearSearchInput: (state) => {
      state = '';
    },
  },
});

export const { updateSearchInput, clearSearchInput } = searchSlice.actions;
export default searchSlice.reducer;

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { updateSearchInput, clearSearchInput } from './searchSlice';

const Sidebar = () => {
  const dispatch = useDispatch();
  const searchInput = useSelector((state) => state.searchInput);

  const handleLinkClick = () => {
    dispatch(clearSearchInput());
  };

  return (
    <div>
      <ul>
        <li>
          <a href="#" onClick={handleLinkClick}>Link 1</a>
        </li>
        {/* Other sidebar links */}
      </ul>
    </div>
  );
};

export default Sidebar;

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { updateSearchInput } from './searchSlice';

const SearchBar = () => {
  const dispatch = useDispatch();
  const searchInput = useSelector((state) => state.searchInput);

  const handleInputChange = (event) => {
    dispatch(updateSearchInput(event.target.value));
  };

  return (
    <div>
      <input type="text" value={searchInput} onChange={handleInputChange} />
    </div>
  );
};

export default SearchBar;