如何使用搜索栏和Redux钩子在React Native中搜索FlatList

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);
export default store;

// reducers.js
const initialState = {
  searchKeyword: '',
  data: [], // 假设这是你的原始数据列表
  filteredData: []
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_SEARCH_KEYWORD':
      return { ...state, searchKeyword: action.payload };
    case 'SET_DATA':
      return { ...state, data: action.payload, filteredData: action.payload };
    case 'FILTER_DATA':
      const filtered = state.data.filter(item =>
        item.toLowerCase().includes(state.searchKeyword.toLowerCase())
      );
      return { ...state, filteredData: filtered };
    default:
      return state;
  }
}

export default rootReducer;

// actions.js
export const setSearchKeyword = keyword => ({
  type: 'SET_SEARCH_KEYWORD',
  payload: keyword
});

export const setData = data => ({
  type: 'SET_DATA',
  payload: data
});

export const filterData = () => ({
  type: 'FILTER_DATA'
});

// SearchScreen.js
import React, { useEffect } from 'react';
import { View, TextInput, FlatList, Text } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { setSearchKeyword, filterData } from './actions';

const SearchScreen = () => {
  const dispatch = useDispatch();
  const searchKeyword = useSelector(state => state.searchKeyword);
  const filteredData = useSelector(state => state.filteredData);

  useEffect(() => {
    dispatch(filterData());
  }, [searchKeyword, dispatch]);

  return (
    <View>
      <TextInput
        placeholder="Search..."
        value={searchKeyword}
        onChangeText={text => dispatch(setSearchKeyword(text))}
      />
      <FlatList
        data={filteredData}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text>{item}</Text>}
      />
    </View>
  );
};

export default SearchScreen;

import { debounce } from 'lodash';

// 在组件中使用debounce
const handleSearchChange = debounce(text => {
  dispatch(setSearchKeyword(text));
}, 300);