Question

查看README：

中的示例

鉴于＆＃34;坏＆＃34;结构：

[{
  id: 1,
  title: 'Some Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}, {
  id: 2,
  title: 'Other Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}]

添加新对象非常容易。我所要做的就是

return {
  ...state,
  myNewObject
}

在减速器中。

现在给出了＆＃34; good＆＃34;的结构。树，我不知道我应该怎么做。

{
  result: [1, 2],
  entities: {
    articles: {
      1: {
        id: 1,
        title: 'Some Article',
        author: 1
      },
      2: {
        id: 2,
        title: 'Other Article',
        author: 1
      }
    },
    users: {
      1: {
        id: 1,
        name: 'Dan'
      }
    }
  }
}

我所考虑的每一种方法都需要一些复杂的对象操作，这让我觉得我没有走上正确的轨道，因为普通人应该让我的生活更轻松。

我无法在网上找到以这种方式使用normalizr树的人的任何示例。 The official example没有添加和删除所以也没有任何帮助。

有人能告诉我如何以正确的方式从normalizr树中添加/删除吗？

Answer 1

以下内容直接来自redux / normalizr creator here的帖子：

所以你的州看起来像：

{
  entities: {
    plans: {
      1: {title: 'A', exercises: [1, 2, 3]},
      2: {title: 'B', exercises: [5, 1, 2]}
     },
    exercises: {
      1: {title: 'exe1'},
      2: {title: 'exe2'},
      3: {title: 'exe3'}
    }
  },
  currentPlans: [1, 2]
}

您的减速器可能看起来像

import merge from 'lodash/object/merge';

const exercises = (state = {}, action) => {
  switch (action.type) {
  case 'CREATE_EXERCISE':
    return {
      ...state,
      [action.id]: {
        ...action.exercise
      }
    };
  case 'UPDATE_EXERCISE':
    return {
      ...state,
      [action.id]: {
        ...state[action.id],
        ...action.exercise
      }
    };
  default:
    if (action.entities && action.entities.exercises) {
      return merge({}, state, action.entities.exercises);
    }
    return state;
  }
}

const plans = (state = {}, action) => {
  switch (action.type) {
  case 'CREATE_PLAN':
    return {
      ...state,
      [action.id]: {
        ...action.plan
      }
    };
  case 'UPDATE_PLAN':
    return {
      ...state,
      [action.id]: {
        ...state[action.id],
        ...action.plan
      }
    };
  default:
    if (action.entities && action.entities.plans) {
      return merge({}, state, action.entities.plans);
    }
    return state;
  }
}

const entities = combineReducers({
  plans,
  exercises
});

const currentPlans = (state = [], action) {
  switch (action.type) {
  case 'CREATE_PLAN':
    return [...state, action.id];
  default:
    return state;
  }
}

const reducer = combineReducers({
  entities,
  currentPlans
});

那么这里发生了什么？首先，请注意状态是规范化的。我们从未在其他实体内部拥有实体。相反，它们通过ID互相引用。因此，每当某个对象发生变化时，只需要一个地方就可以更新它。

其次，请注意我们如何通过在计划缩减器中添加适当的实体并将其ID添加到currentPlans reducer来对CREATE_PLAN做出反应。这个很重要。在更复杂的应用中，您可能拥有关系，例如计划reducer可以通过在计划内的数组中附加新ID来以相同的方式处理ADD_EXERCISE_TO_PLAN。但是如果练习本身更新了，那么计划缩减器就不需要知道，因为ID没有改变。

第三，注意实体减少者（计划和练习）有特殊条款，注意行动。这是因为我们有一个“已知真相”的服务器响应，我们想要更新我们要反映的所有实体。要在分派操作之前以这种方式准备数据，可以使用normalizr。您可以在Redux repo中的“真实世界”示例中看到它。

最后，请注意实体减速器是如何相似的。您可能想要编写一个函数来生成它们。它超出了我的答案范围 - 有时你想要更多的灵活性，有时你想要更少的样板。您可以查看“真实世界”示例缩减器中的分页代码，以获取生成类似缩减器的示例。

哦，我使用{... a，... b}语法。它在Babel阶段2中被启用为ES7提案。它被称为“对象传播运算符”，相当于编写Object.assign（{}，a，b）。

至于库，你可以使用Lodash（注意不要改变，例如merge（{}，a，b}是正确的但是merge（a，b）不是），updeep，react-addons-update或但是如果你发现自己需要进行深度更新，这可能意味着你的状态树不够扁平，并且你没有充分利用功能组合。甚至你的第一个例子：

case 'UPDATE_PLAN':
  return {
    ...state,
    plans: [
      ...state.plans.slice(0, action.idx),
      Object.assign({}, state.plans[action.idx], action.plan),
      ...state.plans.slice(action.idx + 1)
    ]
  };

可以写成

const plan = (state = {}, action) => {
  switch (action.type) {
  case 'UPDATE_PLAN':
    return Object.assign({}, state, action.plan);
  default:
    return state;
  }
}

const plans = (state = [], action) => {
  if (typeof action.idx === 'undefined') {
    return state;
  }
  return [
    ...state.slice(0, action.idx),
    plan(state[action.idx], action),
    ...state.slice(action.idx + 1)
  ];
};

// somewhere
case 'UPDATE_PLAN':
  return {
    ...state,
    plans: plans(state.plans, action)
  };

Answer 2

我大部分时间都使用normalizr来获取从API获得的数据，因为我对（通常）深层嵌套数据结构没有任何控制权。让我们区分实体和结果及其用法。

<强>实体

所有纯数据在规范化后都在实体对象中（在您的情况下为articles和users）。我建议对所有实体使用reducer或为每个实体类型使用reducer。实体reducer应负责保持您的（服务器）数据同步并具有单一的事实来源。

const initialState = {
  articleEntities: {},
  userEntities: {},
};

<强>结果

结果仅是对您实体的引用。想象一下以下场景：（1）您使用articles从建议的ids: ['1', '2'] API获取。您可以在文章实体缩减器中保存实体。（2）现在，您将使用id: 'X'获取特定作者撰写的所有文章。您再次同步文章实体缩减器中的文章。 文章实体缩减器是所有文章数据的唯一真实来源 - 就是这样。现在你想要另一个地方来区分文章（（1）推荐文章和（2）作者X的文章）。您可以轻松地将这些保存在另一个特定用途的减速器中。减速器的状态可能如下所示：

const state = {
  recommended: ['1', '2' ],
  articlesByAuthor: {
    X: ['2'],
  },
};

现在您可以很容易地看到作者X的文章也是推荐的文章。但是你在文章实体缩减器中只保留了一个单一的事实来源。

在您的组件中，您可以简单地映射实体+ recommended / articlesByAuthor来呈现实体。

免责声明：我可以推荐一篇我写的博客文章，其中展示了一个真实世界的应用程序如何使用normalizr来防止状态管理中的问题：Redux Normalizr: Improve your State Management

Answer 3

我实现了通用减速机的小偏差，可以通过互联网找到。它能够从缓存中删除项目。您所要做的就是确保在每次删除时都发送一个包含已删除字段的操作：

export default (state = entities, action) => {
    if (action.response && action.response.entities)
        state = merge(state, action.response.entities)

    if (action.deleted) {
        state = {...state}

        Object.keys(action.deleted).forEach(entity => {
            let deleted = action.deleted[entity]

            state[entity] = Object.keys(state[entity]).filter(key => !deleted.includes(key))
                .reduce((p, id) => ({...p, [id]: state[entity][id]}), {})
        })
    }

    return state
}

动作代码中的用法示例：

await AlarmApi.remove(alarmId)

dispatch({
    type: 'ALARM_DELETED',
    alarmId,
    deleted: {alarms: [alarmId]},
})

Answer 4

聚会晚了几年，但是-

您可以使用normalized-reducer轻松管理归一化的减速器状态，而无需任何样板。您传入一个描述关系的模式，它会返回简化器，操作和选择器来管理该状态片。

import makeNormalizedSlice from 'normalized-reducer';

const schema = {
  user: {
    articles: {
      type: 'article', cardinality: 'many', reciprocal: 'author'
    }
  },
  article: {
    author: {
      type: 'user', cardinality: 'one', reciprocal: 'articles'
    }
  }
};

const {
  actionCreators,
  selectors,
  reducer,
  actionTypes,
  emptyState
} = makeNormalizedSlice(schema);

操作允许您执行基本的CRUD逻辑以及更复杂的操作，例如关系附件/分离，级联删除和批处理操作。

继续示例，状态如下：

{
  "entities": {
    "user": {
      "1": { 
        "id": "1", 
        "name": "Dan",
        "articles": ["1", "2"]
      }
    },
    "article": {
      "1": { 
        "id": "1",
        "author": "1",
        "title": "Some Article",
      },
      "2": {
        "id": "2",
        "author": "1",
        "title": "Other Article",
      }
    }
  },
  "ids": {
    "user": ["1"],
    "article": ["1", "2"]
  }
}

Normalized Reducer还与normalizr集成：

import { normalize } from 'normalizr'
import { fromNormalizr } from 'normalized-reducer'

const denormalizedData = {...}
const normalizrSchema = {...}

const normalizedData = normalize(denormalizedData, normalizrSchema);
const initialState = fromNormalizr(normalizedData);

Another example的normalizr集成

Answer 5

在您的reducer中，保留未规范化数据的副本。这样，您可以执行以下操作（向状态中的数组添加新对象时）：

case ACTION:
  return {
    unNormalizedData: [...state.unNormalizedData, action.data],
    normalizedData: normalize([...state.unNormalizedData, action.data], normalizrSchema),
  }

如果您不想在商店中保留未规范化的数据，也可以使用denormalize

如何添加/删除使用normalizr生成的redux存储？

5 个答案: