我必须采取行动
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 个存储库,而不是 20 个,所以当我尝试再次过滤我的 PHP 时,这些存储库都消失了。
显示再次重新获取数据还是应该过滤反应道具中的数据?
这是行动
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
内运行相同的提取,或者一起删除该操作并负责过滤道具上的存储?你以为这些就是使用 redux 的原因,对吧?
您不应该从 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)
})
只要状态发生变化,您就可以保存状态,如下所示:
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()
}
}
在将新状态添加到历史对象之前,您可能需要检查新状态是否与上次推送的状态相同。
如果您只想在客户端过滤存储库,则应该始终将所有存储库维护在状态中,并在另一个属性中过滤它们,例如
filteredRepos
我认为我们无法恢复 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;