const baseState = [
  {
    title: 'Learn TypeScript',
    done: true,
  },
  {
    title: 'Try Immer',
    done: false,
  },
];

const nextState = [...baseState]; // 淺拷貝數(shù)組
nextState[1] = {
  // 替換第一層元素
  ...nextState[1], // 淺拷貝第一層元素
  done: true, // 期望的更新
};
// 因為 nextState 是新拷貝的, 所以使用 push 方法是安全的,
// 但是在未來的任意時間做相同的事情會違反不變性原則并且導致 bug！
nextState.push({ title: 'Tweet about it' });

import produce from 'immer';
const nextState = produce(baseState, draft => {
  draft[1].done = true;
  draft.push({ title: 'Tweet about it' });
});

const someReducer = (state, action) => {
  return {
    ...state,
    first: {
      ...state.first,
      second: {
        ...state.first.second,
        third: {
          ...state.first.second.third,
          value: action,
        },
      },
    },
  };
};

const someReducer = (state, action) => {
  state.first.second.third.value = action;
};

import produce from 'immer';
const todosObj = {
  id1: { done: false, body: 'Take out the trash' },
  id2: { done: false, body: 'Check Email' },
};
// 添加
const addedTodosObj = produce(todosObj, draft => {
  draft['id3'] = { done: false, body: 'Buy bananas' };
});
// 刪除
const deletedTodosObj = produce(todosObj, draft => {
  delete draft['id1'];
});
// 更新
const updatedTodosObj = produce(todosObj, draft => {
  draft['id1'].done = true;
});

import produce from 'immer';
const todosArray = [
  { id: 'id1', done: false, body: 'Take out the trash' },
  { id: 'id2', done: false, body: 'Check Email' },
];
// 添加
const addedTodosArray = produce(todosArray, draft => {
  draft.push({ id: 'id3', done: false, body: 'Buy bananas' });
});
// 索引刪除
const deletedTodosArray = produce(todosArray, draft => {
  draft.splice(3 /*索引 */, 1);
});
// 索引更新
const updatedTodosArray = produce(todosArray, draft => {
  draft[3].done = true;
});
// 索引插入
const updatedTodosArray = produce(todosArray, draft => {
  draft.splice(3, 0, { id: 'id3', done: false, body: 'Buy bananas' });
});
// 刪除最后一個元素
const updatedTodosArray = produce(todosArray, draft => {
  draft.pop();
});
// 刪除第一個元素
const updatedTodosArray = produce(todosArray, draft => {
  draft.shift();
});
// 數(shù)組開頭添加元素
const addedTodosArray = produce(todosArray, draft => {
  draft.unshift({ id: 'id3', done: false, body: 'Buy bananas' });
});
// 根據(jù) id 刪除
const deletedTodosArray = produce(todosArray, draft => {
  const index = draft.findIndex(todo => todo.id === 'id1');
  if (index !== -1) {
    draft.splice(index, 1);
  }
});
// 根據(jù) id 更新
const updatedTodosArray = produce(todosArray, draft => {
  const index = draft.findIndex(todo => todo.id === 'id1');
  if (index !== -1) {
    draft[index].done = true;
  }
});
// 過濾
const updatedTodosArray = produce(todosArray, draft => {
  // 過濾器實際上會返回一個不可變的狀態(tài)，但是如果過濾器不是處于對象的頂層，這個依然很有用
  return draft.filter(todo => todo.done);
});

import produce from 'immer';
// 復雜數(shù)據(jù)結構例子
const store = {
  users: new Map([
    [
      '17',
      {
        name: 'Michel',
        todos: [{ title: 'Get coffee', done: false }],
      },
    ],
  ]),
};
// 深度更新
const nextStore = produce(store, draft => {
  draft.users.get('17').todos[0].done = true;
});
// 過濾
const nextStore = produce(store, draft => {
  const user = draft.users.get('17');
  user.todos = user.todos.filter(todo => todo.done);
});

import produce from 'immer';
const user = { name: 'michel', todos: [] };
const loadedUser = await produce(user, async draft => {
  draft.todos = await (await fetch('http://host/' + draft.name)).json();
});

import { createDraft, finishDraft } from 'immer';
const user = { name: 'michel', todos: [] };
const draft = createDraft(user);
draft.todos = await (await fetch('http://host/' + draft.name)).json();
const loadedUser = finishDraft(draft);

const onReceiveTodo = todo => {
  const nextTodos = produce(todos, draft => {
    draft.todos[todo.id] = todo;
    // 注意，因為 todo 來自外部，而不是 draft，所以他不會被 draft，
    // 所以下面的修改會影響原來的 todo！
    draft.todos[todo.id].done = true;
    // 上面的代碼相當于
    todo.done = true;
    draft.todos[todo.id] = todo;
  });
};

// 嵌套的錯誤寫法：
produce(state, draft => {
  produce(draft.user, userDraft => {
    userDraft.name += '!';
  });
});

// 嵌套的正確寫法：
produce(state, draft => {
  draft.user = produce(draft.user, userDraft => {
    userDraft.name += '!';
  });
});

const remove = produce((list, element) => {
  const index = list.indexOf(element); // 不會工作！
  const index = original(list).indexOf(element); // 用這個！
  if (index !== -1) {
    list.splice(index, 1);
  }
});
const values = [a, b, c];
remove(values, a);