如果用户离开页面，则在 Redux 中重置搜索状态答案

【问题标题】：Reset Search State in Redux If User Leaves Page如果用户离开页面，则在 Redux 中重置搜索状态
【发布时间】：2019-11-13 21:05:55
【问题描述】：

我正在使用 Redux 来存储搜索值的状态。这是我的搜索组件和减速器

搜索组件

const Search = props => {
  const handleSearch = event => {
    event.preventDefault();
    props.searchChange(event.target.value.toLowerCase());
  };

  const handleFilter = event => {
    props.filterChange(event.target.value);
  };

  const style = {
    marginBottom: 10
  };

  return (
    <div style={style}>
      search
      <input onChange={handleSearch} />
      <select onChange={handleFilter}>
        <option value="DESC">Sort Likes Descending</option>
        <option value="ASC">Sort Likes Ascending</option>
      </select>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    search: state.search,
    filter: state.filter
  };
};

export default connect(mapStateToProps, { searchChange, filterChange })(Search);

还有我的动作创建者和reducer

    export const searchChange = search => {
      return {
        type: "SET_SEARCH",
        search
      };
    };

    const searchReducer = (state = null, action) => {
      switch (action.type) {
        case "SET_SEARCH":
          return action.search;
        default:
          return state;
      }
    };

如果我搜索某些内容，它会正确过滤掉已识别的项目。但是，如果我单击另一个页面并返回，则搜索值的状态仍然存在。因此，用户必须刷新页面才能清除搜索值。在某些情况下，我发现刷新页面时状态并不清楚。我应该在哪里以及如何重置“搜索”状态？

这是我的博客组件（注意我在这里也调用了搜索组件）这是我显示博客项目列表的地方；

const searchBlogs = ({ blogs, search }) => {
  return search
    ? blogs.filter(a => a.title.toLowerCase().includes(search.toLowerCase()))
    : blogs;
};

const Blogs = ({ blogsToShow, filter }) => {
  return (
    <>
      <Search />
      <div>
        <h3>Blogs</h3>
        <Table striped celled>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>Blog Title</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {filter === "DESC"
              ? blogsToShow
                  .sort((a, b) => b.likes - a.likes)
                  .map(blog => (
                    <Table.Row key={blog.id}>
                      <Table.Cell>
                        <Link to={`/blogs/${blog.id}`}>{blog.title}</Link>
                      </Table.Cell>
                    </Table.Row>
                  ))
              : blogsToShow
                  .sort((a, b) => a.likes - b.likes)
                  .map(blog => (
                    <Table.Row key={blog.id}>
                      <Table.Cell>
                        <Link to={`/blogs/${blog.id}`}>{blog.title}</Link>
                      </Table.Cell>
                    </Table.Row>
                  ))}
          </Table.Body>
        </Table>
      </div>
    </>
  );
};

const mapStateToProps = state => {
  return {
    blogs: state.blogs,
    filter: state.filter,
    blogsToShow: searchBlogs(state)
  };
};

export default connect(mapStateToProps)(Blogs);

【问题讨论】：

您需要一个CLEAR_SEARCH 动作创建者，当它在您的reducer 中调度时返回一个null。然后您需要在导航时触发此操作。 Link 是什么？你能在那里启动行动吗？
嗯，好吧，这是有道理的。 Link 只是 React Router 链接组件，它提供指向新页面的链接......所以不能在那里做。
是的，您可以在 Link 调用中触发调度：stackoverflow.com/questions/39294424/…
好吧，好吧，好吧，谢谢你，你能做到这一点真是太棒了......这很重要......谢谢！

标签： javascript reactjs redux

【解决方案1】：

你可以定义一个新的动作，比如

export const searchChange = search => {
  return {
    type: "RESET_SEARCH"
  };
};

在你的减速器中，你可以设置为 INITIAL_STATE：

const INITIAL_STATE = {
    ... 
    search: ''
    ... 
}

const searchReducer = (state = null, action) => {
      switch (action.type) {
        case "RESET_SEARCH":
          return INITIAL_STATE;
        default:
          return state;
      }
    };

【讨论】：

【解决方案2】：

感谢凯尔的帮助，我做了以下事情：

创建了一个新的 action creator 和 reducer，如下所示：

export const clearSearch = search => {
  return {
    type: "RESET_SEARCH",
    search
  };
};


const searchReducer = (state = null, action) => {
  switch (action.type) {
    case "SET_SEARCH":
      return action.search;
    case "RESET_SEARCH":
      return null;
    default:
      return state;
  }
};

对于用户可以单击的任何链接，我只包含了对 clearSearch 操作创建者的调用。这样做的主要问题是，我不仅必须在我的个人博客文章中这样做，而且对于网站上的任何其他页面链接都必须这样做。这是一个快速修复，但如果添加了任何链接，则需要包含明确的修复，这会使其有点混乱。

import { clearSearch } from "../reducers/searchReducer";

 const clear = () => {
    clearSearch();
  };

<Link onClick={() => clear()} style={padding} to="/blogs">

【讨论】：