基于react-native-elements的SearchBar结合Redux的搜索实现问题咨询

Hey there! Let's break down your questions step by step and fix the code to make your SearchBar work smoothly with Redux.

1. Where to store the search term & Do you need a separate reducer? #

You have two solid options here, but splitting into a separate reducer for search state is the cleaner approach (following Redux's single-responsibility principle):

• The search term is a standalone UI state, separate from your video list data. Keeping it in its own reducer makes your state structure more organized and easier to maintain, especially if you reuse search functionality elsewhere.
• Alternatively, you could add a searchTerm field to your existing videos reducer if you prefer a more compact state. Either works, but let's go with the separate reducer for clarity.

2. How to populate the search input with the typed text #

The key here is binding the SearchBar's value prop directly to your Redux-stored search term. This creates a two-way sync: when you type in the input, you update the Redux state, and the input reflects the current state value (like when clearing the search).

Let's adjust your code step by step #

First, create a separate search reducer

// searchReducer.js
const initialState = {
  searchTerm: ""
};

export default function searchReducer(state = initialState, action) {
  switch (action.type) {
    case "SET_SEARCH_TERM":
      return {
        ...state,
        searchTerm: action.payload
      };
    default:
      return state;
  }
}

Then combine it with your videos reducer in your root reducer:

// rootReducer.js
import { combineReducers } from 'redux';
import videosReducer from './videosReducer';
import searchReducer from './searchReducer';

const rootReducer = combineReducers({
  videos: videosReducer,
  search: searchReducer
});

export default rootReducer;

Update your videos reducer to preserve original data

Right now, your reducer overwrites the entire state with filtered data, which means you lose the original video list. Let's fix that by storing both original and filtered videos:

// videosReducer.js
const initialState = {
  originalVideos: [], // Holds your full, unfiltered video list
  filteredVideos: []  // Holds the filtered results
};

export default function videosReducer(state = initialState, action) {
  switch (action.type) {
    // Add this case if you fetch videos initially (to store original data)
    case "SET_VIDEOS":
      return {
        ...state,
        originalVideos: action.payload,
        filteredVideos: action.payload // Start with full list
      };
    case "FILTER_VIDEOS": {
      const searchText = action.payload.toUpperCase();
      const filtered = state.originalVideos.filter(item => {
        const itemTitle = item.title ? item.title.toUpperCase() : "";
        return itemTitle.includes(searchText);
      });
      return {
        ...state,
        filteredVideos: filtered
      };
    }
    default:
      return state;
  }
}

Adjust your component's Redux connections and logic

Update mapStateToProps to pull the search term and filtered videos from Redux:

const mapStateToProps = state => {
  return {
    videos: state.videos.filteredVideos,
    searchTerm: state.search.searchTerm
  };
};

Update mapDispatchToProps to include actions for setting the search term and filtering videos:

const mapDispatchToProps = dispatch => ({
  setSearchTerm: (term) => dispatch({ type: "SET_SEARCH_TERM", payload: term }),
  filterVideos: (term) => dispatch({ type: "FILTER_VIDEOS", payload: term })
});

Modify your SearchFilterFunction to update the search term first, then trigger the filter:

SearchFilterFunction(text) {
  const { setSearchTerm, filterVideos } = this.props;
  setSearchTerm(text);
  filterVideos(text);
}

Finally, bind the SearchBar's value to the Redux-stored search term:

<SearchBar
  round
  searchIcon={{ size: 24 }}
  onChangeText={text => this.SearchFilterFunction(text)}
  onClear={() => this.SearchFilterFunction("")}
  placeholder="Type Here..."
  value={this.props.searchTerm}
/>

Why this works: #

• The SearchBar's value is tied to this.props.searchTerm, so any changes to the Redux state (like typing or clearing) automatically update the input.
• Storing the original video list means you always filter from the full dataset, avoiding data loss from repeated filtering.
• Separating the search state into its own reducer keeps your code modular and easier to debug.

内容的提问来源于stack exchange，提问作者Bomber