如何恢复到Redux的原始状态？

Question

我必须采取行动FETCH_REPOS和FILTER_BY_LANGUAGE 。 当应用程序运行时，将从服务器中获取回购协议并将其加载到商店中。

然后我尝试按语言过滤

case 'FILTER_BY_LANGUAGE':
  let newState =  { 
    repos:[...new Set(state.repos)]
         .filter(val => val.language == action.payload)
    }
    return newState

场景是，我获取30个存储库。 假设10个是JS，10个PHP和10个节点。

然后，我过滤JS存储库。 现在该商店有10个存储库，而不是20个，因此当我再次尝试过滤PHP时，这些存储库就消失了。

显示是否重新提取数据，还是应该在react props中过滤数据？

这是动作

export const fetchRepos = () => dispatch => {
    fetch('http://localhost:4000/originalrepos')
        .then(res => res.json())
        .then(repos => {
            let content = repos.map((data, i)=>{
                return {
                    title: data.name,
                    username: data.owner.login,
                    avatar: data.owner.avatar_url,
                    date: data.updated_at,
                }
            })
            dispatch({
                type: 'FETCH_REPOS',
                payload: content
            })
        })
}
export const filterByLanguage = language => dispatch => {
    dispatch({
        type: 'FILTER_BY_LANGUAGE',
        payload: language

    })
}

我将fetchRepos挂载，然后以FILTER_BY_LANGUAGE形式减少存储。 这是预期的行为 ，所以我想知道我是否需要在FILTER_BY_LANGUAGE运行相同的访FILTER_BY_LANGUAGE或者一起删除该操作，并注意在道具处过滤存储？ 认为这些是使用redux的原因，对吗？

Answer 1

您不应该从redux商店替换您的仓库。 相反，您可以添加一个过滤器以获取可见的回购，因此所有回购仍在商店中，但是您可以选择要查看的回购。 您可以查看redux待办事项清单作为示例。

const getVisibleRepos = (repos, filter) => {
  switch (filter) {
    case VisibilityFilters.SHOW_ALL:
      return repos
    case VisibilityFilters.SHOW_PHP:
      return repos.filter(t => t.type === 'node')
    case VisibilityFilters.SHOW_NODE:
      return repos.filter(t => t.type === 'php')
    default:
      return repos;
  }
}
​
const mapStateToProps = state => ({
  todos: getVisibleRepos(state.repos, state.visibilityFilter)
})

Answer 2

如果只想在客户端过滤仓库，则应始终将所有仓库保持在状态，并在另一个属性（如filteredRepos对其进行filteredRepos

Answer 3

我认为我们无法还原Redux状态更改。 解决方案之一是将两个列表保持在该状态。 一份原始邮件和一份经过过滤的邮件，这样您将始终可以方便地使用原始邮件列表，并且经过过滤的列表可能已过滤了项目。

case 'FETCH_REPOS':
    return { repos: action.payload };

case 'FILTER_BY_LANGUAGE':
    let newState = { 
        filteredRepos: [...new Set(state.repos)].filter(val => val.language == action.payload)
    }
    return newState;

Answer 4

只要发生状态变化，您就可以保存状态，例如：

var stateHistory = []

YourReducer = (state, action){

  //Whenever the reducer is called, it pushes to the history
  stateHistory.push(state)

  switch(action.type){
    ...
    case "UNDO":
      //fire the UNDO action to go back to the last recorded state
      return stateHistory.pop()
  }
}

在将新状态添加到历史记录对象之前，您可能需要检查新状态是否与上一推送状态相同。