我使用redux和normalizr来规范化服务器的响应，基本上遵循 真实世界 例。这条路 entities reducer非常简单，只需合并响应即可。我现在遇到的问题很多 delete 操作。我发现了这个 normalizr repo发行＃21 但仍然无法弄清楚如何解决这个问题。例如，
目前的状态是
{
entities:
product_categories: {
...
13: {
...
products: ["1", "2"], <--------------- [i] Current state
...
}
},
products: {
1: {
id: "1"
}
}
}
标准化的响应是
{
...
product_categories: {
...
13: {
...
products: ["1"], <---------------- [2] Normalized result
}
...
}
如您所见，后端api刚刚返回 所有属于此类别的产品ID在这种情况下，“2”被分离。当'entities'reducer合并这个响应时，“2”仍然存在。现在我只是重新加载页面，但我想知道是否有更好的方法来处理这种情况？
在 entities reducer，我只是像现实世界中的例子一样合并它。
return merge({}, state, action.payload.entities);
只是不要担心它在那里。将您的状态视为数据库。您不会真正从数据库中删除记录，以避免复杂的级联 - 通常您只需更改其在数据库中的状态。类似地，使用Normalizer，而不是真正删除实体，让它们在缓存中，直到用户离开页面！
下面是我的解决方案后面的代码解释。
要执行删除，我已将我的reducer更新为处理删除操作： REMOVE_ENTITY_ITEM。在我通过的行动中 id 和 name 要删除的实体
在reducer中，我首先删除实体本身 store.entities[entityName][entityId]。接下来我需要删除它 id 来自可能指代它的所有其他实体。因为我正在使用 normalizr 我的所有实体都是扁平的，如果它们引用另一个实体，那么它们只有一个数组中的id。这使得删除引用相对简单。我只是循环遍历所有实体并过滤掉对要删除的实体的引用。
我将此方法与＃1的其他两种方法结合使用。）刷新app / state和＃2。）翻转实体状态位而不是删除然后过滤UI中关闭的项目。这些方法已得到很好的讨论 这里
const entities = (state={}, action) => {
if(action.payload && action.payload.entities) {
return merge( {} , state, action.payload.entities);
}else{
return deleteHandlingReducer(state, action)
}
}
const deleteHandlingReducer = (state=initialSate, action) => {
switch(action.type){
case "REMOVE_ENTITY_ITEM":
if (!action.meta || !action.meta.name || !action.meta.id) {
return state;
}else{
let newState = Object.assign({}, state);
if(newState[action.meta.name]){
delete newState[action.meta.name][action.meta.id];
Object.keys(state).map(key => {
let entityHash = state[key];
Object.keys(entityHash).map(entityId => {
let entity = entityHash[entityId];
if(entity[action.meta.name] &&
Array.isArray(entity[action.meta.name])){
entity[action.meta.name] = entity[action.meta.name].
filter(item => item != action.meta.id)
}
});
})
}
return newState;
}
default:
return state;
}
}
现在要删除我触发这样的动作：
store.dispatch({
type: "REMOVE_ENTITY_ITEM",
meta: {
id: 1,
name: "job_titles"
}
});
使用lodash assign。如果使用合并将无法正常工作。
例：
const object = {
'a': [1,2,3]
}
const other = {
'a': [1,2]
}
// item 3 was not removed
const merge = _.merge({}, object, other)
console.log(merge) // {'a': [1,2,3]}
// item 3 was removed
const assign = _.assign({}, object, other)
console.log(assign) // {'a': [1,2]}
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
在这里，您的代码将如何
// state
const state = {
entities: {
product_categories: {
'1': {
id: 1,
products: [1,2]
}
},
products: {
'1': {
id: 1
},
'2': {
id: 2
}
}
}
}
// example of action
// normalized by normalizr
const action = {
type: 'REMOVE_PRODUCT_CATEGORY_SUCCESS',
payload: {
entities: {
product_categories: {
'1': {
id: 1,
products: [1]
}
}
}
}
}
// product_categories entity reducer
function productCategoriesEntityReducer (state = {}, action) {
switch (action.type) {
default:
if (_.has(action, 'payload.entities.product_categories')) {
return _.assign({}, state, action.payload.entities.product_categories)
}
return state
}
}
// run reducer on state.entities.product_categories
const newState = productCategoriesEntityReducer(state.entities.product_categories, action);
console.log(newState)
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>