0

我必须行动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 个 Node。

然后我过滤 JS 存储库。现在商店有 10 个 repos 而不是 20 个，所以当我尝试再次过滤我的 PHP 时，那些 repos 就消失了。

显示是再次重新获取数据还是我应该在反应道具中过滤数据？

以下是动作

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在mount，然后FILTER_BY_LANGUAGE那种减少存储。一种预期的行为，所以我想知道我是否需要在其中运行相同的 fetchFILTER_BY_LANGUAGE或一起删除该操作并注意在道具处过滤商店？认为这些是使用 redux 的原因，对吧？

4

4 回答 4

1

你不应该从 redux 商店替换你的 repos。相反，您可以添加过滤器以获取可见的存储库，因此所有存储库仍在您的商店中，但您可以选择要查看的存储库。您可以查看 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)
})
于 2018-08-17T17:00:10.307 回答
0

如果您只想在客户端过滤存储库，则应始终将所有存储库保持在状态，并将它们过滤到另一个属性中，例如filteredRepos

于 2018-08-17T16:58:35.080 回答
0

我不认为我们可以恢复 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;
于 2018-08-17T17:04:28.473 回答
0

每当状态发生变化时，您都可以保存您的状态，如下所示：

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()
  }
}

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

于 2018-08-17T17:13:28.217 回答