React Redux 工具包如何实现搜索答案

【问题标题】：React Redux toolkit how to implement searchReact Redux 工具包如何实现搜索
【发布时间】：2022-01-05 09:31:48
【问题描述】：

这里是 Redux 新手。我正在尝试在我的 React App 中实现搜索功能。我正在使用 thunk 中间件获取数据。这是我的切片代码：

export const fetchAllJobs = createAsyncThunk(
    'job/fetchJobs',
    async () => {
        const response = await fetch('some-api/availableJobs')
            .then(res => res.json())
        return response;
    }
)
export const jobSlice = createSlice({
    name: 'job',
    initialState: {
        jobs: [],
        searchedJobs: [],
        isLoading: true
    },
    reducers: {
        handleSearchJobs: (state, action) => {
            state.searchedJobs = [];
            state.searchedJobs.push(action.payload)
        },
    },
    extraReducers: (builder) => {
        builder.addCase(fetchAllJobs.fulfilled, (state, action) => {
            state.jobs = action.payload;
            state.searchedJobs = action.payload;
            state.isLoading = false;
        })
        builder.addCase(fetchAllJobs.pending, (state, action) => {
            state.isLoading = true;
        })
    },
});
export const { handleSearchJobs } = jobSlice.actions;
export default jobSlice.reducer;

我正在从我的工作页面上获取的数据填充 DOM。

const [jobId, setJobId] = useState('');
// products to be rendered on the UI
const [displayJobs, setDisplayJobs] = useState(useSelector((state) => state.jobs.jobs));
const dispatch = useDispatch();
const jobs = useSelector((state) => state.jobs.jobs);

useEffect(() => {
    dispatch(fetchAllJobs()) 
}, [dispatch, jobs]);

// handle search job 
const handleSearch = event => {
    if (event.target.value) {
        const searchText = event.target.value;
        const matchedJobs = jobs.filter(job => job.jobTitle
        .toLowerCase().includes(searchText.toLowerCase()));
        dispatch(handleSearchJobs(matchedJobs));
    }
}
return (
    <>
        <div className="search-container">
                <TextField
                    sx={{ width: "50%" }}
                    onChange={handleSearch}
                    placeholder="Search Jobs" />
         </div>
         <div className="jobsContainer">
             <div className="jobs-container-left">
                  {
                      displayJobs.map(job => <Job key={job._id}
                              handleSetJob={handleSetJob}
                              job={job}>
                          </Job>)
                    }
              </div>
          </div>
       </>
    );
};

工作加载非常好。但我想做的是，每当用户在搜索框中输入内容时，我想过滤标题与搜索文本相似的工作。然后，仅在页面上显示这些作业。我知道应该在切片上实现一个过滤机制，但是经过多次尝试，我已经筋疲力尽了。可以使用一些帮助。 TIA。

【问题讨论】：

标签： reactjs redux react-redux redux-thunk redux-toolkit

【解决方案1】：

如果您拥有所有客户端作业并且只想在这些作业中进行搜索，那么该搜索将在记忆选择器中完成（请参阅computing derived data 文档页面）或仅在您的组件中的 useMemo 中完成 - 我可能更喜欢后者。

const [filter, setFilter] = useState("")
const allJobs = useSelector(state => state.jobs)
const filteredJobs = useMemo(() => allJobs.filter(job => job.startsWith(filter), [filter])

不管怎样，你不会一直改变你的 Redux 状态。

【讨论】：