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

在React Redux中，当单击侧边栏上的链接时，同时清除搜索栏中的输入，可以通过以下步骤实现：

首先，在Redux中创建一个保存搜索栏输入值的状态变量。可以使用createSlice或createReducer等方法创建一个Redux的slice，其中包含一个searchInput状态字段。

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;

在React组件中，使用Redux的useDispatch钩子和上述创建的action创建函数来分发更新搜索栏输入值和清除输入值的操作。

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;

在搜索栏组件中，使用Redux的useDispatch钩子和上述创建的action创建函数来分发更新搜索栏输入值的操作。

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;

通过上述步骤，当单击侧边栏上的链接时，会触发handleLinkClick函数，该函数会分发一个清除搜索栏输入值的操作。这样，在Redux中保存的搜索栏输入值状态会被更新为一个空字符串，从而实现清除搜索栏输入值的功能。