filter/searching data in react redux

Question

I'm trying search through data with react and redux and I want to show the data obtained in another page. I have a reducer which fetch the data and an action which filters the data. now here is the problem: I can't filter data and I don't know how to display them in a separate page. this is my reducer:

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
}
}

in this reducer I get the state and filter them. and this is my action:

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)
        }
      }

and my component is a functional component with this code that I'm trying to get the filtered data from 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

As what I understood from the above example, you are trying to fetch job data from an API during search, and show that in a div with each element being a paragraph, so I would recommend not to use redux in this case. Redux is not useful in this context, because you don't need data synchronization. This will only slow your site down.

Simply use useState() and then useEffect() to call the external server API and store it to the state.

Why not use Redux?

1. Your task is to implement a search, so each result is temporary, and unless you want to track all the search results, it will be waste of performance and memory to use Redux

2. The search does not need to inform other components in the Page, i.e the state of the Component is independent of other component, so private state is useful.

3. Redux will keep copying the search results with each unique search, so you will run out of memory soon.