Skip to content

Instantly share code, notes, and snippets.

@koba04
Last active February 17, 2019 07:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save koba04/6a9fbb6855a9064a300615323204d513 to your computer and use it in GitHub Desktop.
Save koba04/6a9fbb6855a9064a300615323204d513 to your computer and use it in GitHub Desktop.
Approaches to normalize Redux Store
interface User {
id: number;
name: string;
todoIds: number[];
}
interface Todo {
id: number;
body: string;
memoIds: number[];
}
interface Memo {
id: number;
body: string;
}
interface State {
users: User[];
todos: Todo[];
memos: Memo[];
}
const state: State = {
users: [
{
id: 1,
name: "Paul",
todoIds: [1]
}
],
todos: [
{
id: 1,
body: "Write a blog",
memoIds: [1, 2]
}
],
memos: [
{
id: 1,
body: "start"
},
{
id: 2,
body: "pending"
}
]
};
let lastMemoId = 2;
const action = {
userId: 1,
todoId: 1,
memo: "resume"
};
++lastMemoId;
const newState: State = {
...state,
todos: state.todos.map(todo => {
if (todo.id === action.todoId) {
return {
...todo,
memoIds: todo.memoIds.concat(lastMemoId)
}
}
return todo;
}),
memos: state.memos.concat({
id: lastMemoId,
body: action.memo
})
}
interface UserMemo {
id: number;
body: string;
}
interface UserTodo {
id: number;
body: string;
memos: UserMemo[]
}
function getTodosByUser(state: State, id: number): UserTodo[] {
return state.users.find(user => user.id === id)
.todoIds
.map(todoId => {
const todo = state.todos.find(todo => todoId === todo.id);
return {
id: todoId,
body: todo.body,
memos: todo.memoIds.map(memoId => ({
id: memoId,
body: state.memos.find(memo => memo.id === memoId).body
}))
};
});
}
interface User {
name: string;
todoIds: number[];
}
interface Todo {
body: string;
memoIds: number[];
}
interface Memo {
body: string;
}
interface State {
userIds: number[];
users: {
[id: number]: User;
};
todos: {
[id: number]: Todo;
};
memos: {
[id: number]: Memo;
};
}
const state: State = {
userIds: [1],
users: {
1: {
name: "Paul",
todoIds: [1]
}
},
todos: {
1: {
body: "Write a blog",
memoIds: [1, 2]
}
},
memos: {
1: {
body: "start"
},
2: {
body: "pending"
}
}
};
let lastMemoId = 2;
const action = {
userId: 1,
todoId: 1,
memo: "resume"
};
++lastMemoId;
const newState: State = {
...state,
todos: {
...state.todos,
[action.todoId]: {
...state.todos[action.todoId],
memoIds: state.todos[action.userId].memoIds.concat(lastMemoId)
}
},
memos: {
...state.memos,
[lastMemoId]: {
body: action.memo
}
}
};
interface UserMemo {
id: number;
body: string;
}
interface UserTodo {
id: number;
body: string;
memos: UserMemo[];
}
function getTodosByUser(state: State, id: number): UserTodo[] {
return state.users[id]
.todoIds.map(todoId => {
const todo = state.todos[todoId]
return {
id: todoId,
body: todo.body,
memos: todo.memoIds.map(memoId => ({
id: memoId,
body: state.memos[memoId].body
}))
};
});
}
interface User {
name: string;
todoIds: number[];
}
interface Todo {
body: string;
memoIds: number[];
}
interface Memo {
body: string;
}
interface State {
users: Map<number, User>;
todos: Map<number, Todo>;
memos: Map<number, Memo>;
}
const state: State = {
users: new Map([[1, { name: "Paul", todoIds: [1] }]]),
todos: new Map([[1, { body: "Write a blog", memoIds: [1, 2] }]]),
memos: new Map([[1, { body: "start" }], [2, { body: "pending" }]])
};
let lastMemoId = 2;
const action = {
userId: 1,
todoId: 1,
memo: "resume"
};
++lastMemoId;
const todo = state.todos.get(action.todoId);
const newState: State = {
...state,
todos: new Map(
state.todos.set(action.todoId, {
...todo,
memoIds: todo.memoIds.concat(lastMemoId)
})
),
memos: new Map(
state.memos.set(lastMemoId, {
body: action.memo
})
)
};
interface UserMemo {
id: number;
body: string;
}
interface UserTodo {
id: number;
body: string;
memos: UserMemo[]
}
function getTodosByUser(state: State, id: number): UserTodo[] {
const user = state.users.get(id);
return user.todoIds.map(todoId => {
const todo = state.todos.get(todoId);
return {
id: todoId,
body: todo.body,
memos: todo.memoIds.map(memoId => ({
id: memoId,
body: state.memos.get(memoId).body
}))
};
});
}
interface User {
id: number;
name: string;
todos: Todo[];
}
interface Todo {
id: number;
body: string;
memos: Memo[];
}
interface Memo {
id: number;
body: string;
}
interface State {
users: User[];
}
const state: State = {
users: [
{
id: 1,
name: "Paul",
todos: [
{
id: 1,
body: "Write a blog",
memos: [
{
id: 1,
body: "start"
},
{
id: 2,
body: "pending"
}
]
}
]
}
]
};
let lastMemoId = 2;
const action = {
userId: 1,
todoId: 1,
memo: "resume"
};
const newState: State = {
...state,
users: state.users.map(user => {
if (user.id === action.userId) {
return {
...user,
todos: user.todos.map(todo => {
if (todo.id === action.todoId) {
++lastMemoId;
return {
...todo,
memos: todo.memos.concat({
id: lastMemoId,
body: action.memo
})
};
}
return todo;
})
};
}
return user;
})
};
interface UserMemo {
id: number;
body: string;
}
interface UserTodo {
id: number;
body: string;
memos: UserMemo[];
}
function getTodosByUser(state: State, id: number): UserTodo[] {
return state.users
.filter(user => user.id === id)
.reduce((acc, cur) => acc.concat(cur.todos), []);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment