如何在react js和redux中过滤时返回所有存储

import { createStore } from 'redux';

// 定义初始状态
const initialState = {
  data: [],
};

// 定义reducer函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_DATA':
      return {
        ...state,
        data: [...state.data, action.payload],
      };
    default:
      return state;
  }
};

// 创建store
const store = createStore(reducer);

import React, { useState } from 'react';
import { useSelector } from 'react-redux';

const FilteredData = () => {
  const [filter, setFilter] = useState('');
  const data = useSelector((state) => state.data);

  const filteredData = data.filter((item) =>
    item.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {filteredData.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import FilteredData from './FilteredData';

const App = () => {
  return (
    <Provider store={store}>
      <FilteredData />
    </Provider>
  );
};

export default App;