如何实现筛选后渲染React组件？附Redux文章组件代码

嘿，我来帮你搞定这个按名称筛选文章并让组件重新渲染的需求～ 咱们先从现有代码的基础上一步步改造：

首先贴出你现有的组件代码方便对照：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ArticleList from "../ArticlesListApp";
class Articles extends Component {
  render() {
    const { articleList } = this.props;
    return ( <ArticleList list={articleList} /> )
  }
}
function mapStateToProps(state) {
  return { articleList: state.articles };
}
export default connect(mapStateToProps)(Articles);

实现步骤详解 #

1. 给Redux状态添加筛选关键词

首先咱们需要在Redux的store里新增一个存储筛选关键词的状态，比如filterText。假设你的reducer原来长这样：

// 原articles reducer
const initialState = {
  articles: [] // 你的文章数组
};

export default function articlesReducer(state = initialState, action) {
  switch (action.type) {
    // 你原来的其他action类型
    default:
      return state;
  }
}

现在修改它，加入筛选状态的管理：

const initialState = {
  articles: [],
  filterText: '' // 新增筛选关键词状态
};

export default function articlesReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_FILTER_TEXT': // 新增更新筛选关键词的action类型
      return {
        ...state,
        filterText: action.payload
      };
    // 你原来的其他action类型
    default:
      return state;
  }
}

2. 创建对应的Action Creator

写一个简单的action creator来触发筛选关键词的更新：

// actions/articleActions.js
export const setFilterText = (text) => ({
  type: 'SET_FILTER_TEXT',
  payload: text
});

3. 修改Articles组件，添加筛选交互

现在把筛选按钮（或输入框）加到Articles组件里，并绑定触发action的逻辑：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setFilterText } from './actions/articleActions'; // 导入刚才的action
import ArticleList from "../ArticlesListApp";

class Articles extends Component {
  handleFilterClick = (filterValue) => {
    // 点击按钮时触发action，传入对应的筛选值
    this.props.setFilterText(filterValue);
  };

  render() {
    const { filteredArticles } = this.props;
    return (
      <div>
        {/* 示例：预设几个筛选按钮，你可以根据实际需求调整 */}
        <button onClick={() => this.handleFilterClick('')}>全部</button>
        <button onClick={() => this.handleFilterClick('React')}>React相关</button>
        <button onClick={() => this.handleFilterClick('Redux')}>Redux相关</button>
        
        <ArticleList list={filteredArticles} />
      </div>
    )
  }
}

4. 修改mapStateToProps，实现数据筛选

这一步是核心：当Redux里的filterText变化时，咱们在mapStateToProps里对原始文章列表进行过滤，返回筛选后的结果。这样一旦筛选关键词变化，组件接收到的filteredArticles就会更新，从而触发重新渲染：

function mapStateToProps(state) {
  const { articles, filterText } = state;
  // 按名称筛选，假设文章对象的名称字段是title，你可以改成实际的字段名
  const filteredArticles = filterText 
    ? articles.filter(article => 
        article.title.toLowerCase().includes(filterText.toLowerCase())
      )
    : articles; // 筛选值为空时返回全部文章

  return { 
    filteredArticles
  };
}

// 把action creator映射到组件props里
export default connect(mapStateToProps, { setFilterText })(Articles);

原理说明 #

当你点击筛选按钮时，handleFilterClick会触发setFilterText action，Redux的reducer会更新filterText状态。mapStateToProps会监听state的变化，自动重新计算filteredArticles，并把新的筛选结果传给Articles组件。组件接收到新的props后，就会自动重新渲染，把筛选后的文章列表传给ArticleList组件。

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