查看 README 中的示例:

鉴于“坏”结构:

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

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

return {
  ...state,
  myNewObject
}

在 reducer 中。

现在有了“好”树的结构，我不知道应该如何处理它。

{
  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 应该让我的生活更轻松。

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

有人可以让我知道如何以正确的方式添加/删除 normalizr 树吗？

最佳答案

以下直接来自 redux/normalizr 创建者的帖子 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]
}

你的 reducer 可能看起来像

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 相互引用。因此，只要某个对象发生变化，就只有一个地方需要更新。

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

第三，注意实体缩减器(计划和练习)有特殊的条款来注意 action.entities。这是为了防止我们有一个“已知真相”的服务器响应，我们想要更新我们所有的实体来反射(reflect)。要在调度操作之前以这种方式准备数据，您可以使用 normalizr。您可以在 Redux 存储库的“真实世界”示例中看到它的使用。

最后，请注意实体缩减器的相似之处。您可能想编写一个函数来生成它们。这超出了我的回答范围——有时您想要更多的灵 active ，有时您想要更少的样板文件。您可以查看“真实世界”示例缩减器中的分页代码，以获取生成类似缩减器的示例。

哦，我使用了 { ...a, ...b } 语法。它作为 ES7 提案在 Babel stage 2 中启用。它被称为“对象展开运算符”，相当于写 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)
  };

关于javascript - 你如何添加/删除到使用 normalizr 生成的 redux 存储？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34954726/