Question

我将面对这个问题好几个星期之前我问another question，我发现这个问题与脏状态有关。

基本上，我创建了一个包含文章列表的页面，当您单击其中一个文章时，您将看到一篇文章。我正在使用componentDidMount为文章和文章制作AJAX GET请求（您可以在here中看到此代码）。

我试图在不问这里的情况下找到解决方案，但我无法做到。我猜我必须在ArticlePage中添加componentWillUnmount方法来清理上一页的脏状态。
这是我为列表和每篇文章提取文章的动作。

export function fetchArticles(){
   return (dispatch) => {
      axios.get('/api/articles').then(({data}) => {
         dispatch({
            type: FETCH_ARTICLES,
            payload: data
         })
      })
    }
}
export function fetchArticle(id){
    return (dispatch) => {
       axios.get(`/api/articles/${id}`).then(({data}) => {
          dispatch({
             type: FETCH_ARTICLE,
             payload: data
          })
       })
    } 
 }

这是我的减速机：

export default function(state=[], action){
   switch (action.type) {
      case FETCH_ARTICLES:
         return action.payload;
      case FETCH_ARTICLE:
         return action.payload;
    default:
         return state;
   }
 }

如何清理脏状态？

Answer 1

你的减速机应该是这样的：

export default function(state=[], action){
   switch (action.type) {
      case FETCH_ARTICLES:
         return action.payload;
      case FETCH_ARTICLE:
         return action.payload;
      case RESET_ARTICLE:
         return []; // return an empty state here.
    default:
         return state;
   }
 }

并在componentWillUnmount触发RESET_ARTICLE操作的组件中。

如何清理React和Redux中的脏状态？

1 个答案: