在 react redux 中过滤/搜索数据

Question

我正在尝试使用 react 和 redux 搜索数据，我想显示在另一个页面中获得的数据。我有一个获取数据的减速器和一个过滤数据的操作。现在问题来了：我无法过滤数据，也不知道如何在单独的页面中显示它们。 这是我的减速机：

export const SEARCHReducer = (state = { jobs: [] }, action) => {
switch (action.type) {
  case 'JOBS_SEARCH_REQUEST':
    return { loading: true, jobs: [] }
  case 'JOBS_SEARCH_SUCCESS':
    const {payload} = action;
    const filtered = state.jobs.filter((job)=> job.title.toLowerCase().includes(action.toLowerCase()));
    retrn filtered
  default:
    return state
}
}

在这个减速器中，我得到状态并过滤它们。 这是我的行动：

export const SEARCHAction = () => async (dispatch) => {
 try {
   dispatch({ type: 'JOBS_SEARCH_REQUEST' })

   const { data } = await axios.get('http://localhost:8000/jobs')

    dispatch({
      type: 'JOBS_SEARCH_SUCCESS',
      payload: data,
         })
          } catch (error) {
      console.log(error)
        }
      }

我的组件是一个功能组件，我正在尝试从 reducer 获取过滤后的数据：

function SearchBar() {
     const [allData,setAllData] = useState([]);
     const [filteredData,setFilteredData] = useState(allData);
     const [searchTerm , setSearchTerm] = useState('')


     const dispatch = useDispatch()
     const searchItems = useSelector((state) => state.searchItems)       
     const { loading, filtered} = searchItems;         
     const getJobs=()=>{
          dispatch(SEARCHAction());
          setFilteredData(filtered)
      }

      const handleSearch = (e) =>{
          e.preventDefault();
          getJobs();
        
      }
return (      
        <form>
              <div>           
                  <input 
                        onChange={e=>setSearchTerm(e.target.value)}                                                                              
                        id="search-input"
                        type="text" 
                        className="form-control job-field lg:col-span-9 h-12 px-3 outline-none" 
                        placeholder="job title, keywords or company name"
                        />
                  
                     <button
                           type="submit"
                           onSubmit={handleSearch}                                    
                           className="btn search-btn border-0 lg:col-span-3">
                           <i className="fa fa-search mx-1"></i>
                     </button> 
                </div>
        </form>
        <div>
            {  loading ?( <p>gettig data</p>) :
            filteredData.map((value , index)=>{
                return  (<p className="bg-black text-white text-3xl">{value.title}</p>)
            })}
        </div>
        
       
    </div>
   )
 }

Answer 1

正如我从上面的示例中了解到的那样，您正在尝试在搜索期间从 API 获取作业数据，并在 div 中显示，每个元素都是一个段落，因此我建议在这种情况下不要使用 redux。 Redux 在这种情况下没有用，因为您不需要数据同步。这只会减慢您的网站速度。

只需使用 useState() 再使用 useEffect() 即可调用外部服务器 API 并将其存储到状态。

为什么不使用 Redux？

1. 你的任务是实现一个搜索，所以每个结果都是临时的，除非你想跟踪所有的搜索结果，否则使用 Redux 会浪费性能和内存

2. 搜索不需要通知Page中的其他组件，即Component的状态是独立于其他组件的，所以私有状态很有用。

3. Redux 会不断复制每次唯一搜索的搜索结果，因此您很快就会耗尽内存。