Skip to content

Instantly share code, notes, and snippets.

View perjo927's full-sized avatar
🧑‍💻

Per Jonsson perjo927

🧑‍💻
  • DevCode
  • Stockholm, Sweden
View GitHub Profile
@perjo927
perjo927 / main.js
Created September 8, 2020 15:43
Maiden Voyage for Todo App
import { createStore } from "./redux/store/index";
import { actions } from "./redux/actions/index";
import { rootReducer } from "./redux/reducers/index";
const store = createStore(rootReducer, {});
store.subscribe(() => console.log(store.getState()));
const { id } = store.dispatch(actions.addTodo({id: 1, done: false, text: "My first todo"}));
store.dispatch(actions.toggleTodo(id));
store.dispatch(actions.undo());
@perjo927
perjo927 / index.js
Created September 8, 2020 15:00
Export reducers
import { visibilityReducer } from "./visibility";
import { todoReducer, areTodosEqual } from "./todos";
import { getUndoableReducer } from "./undoable";
import { combineReducers } from "./combineReducers";
export const undoableTodoReducer = getUndoableReducer(
todoReducer,
areTodosEqual
);
@perjo927
perjo927 / combineReducers.js
Created September 8, 2020 14:55
Combine Reducers
/*
Read more at:
https://redux.js.org/api/combinereducers
*/
export const combineReducers = (reducers) => (
state = {},
action = { value: null, type: null }
) =>
Object.keys(reducers).reduce((nextState, key) => {
// Call every reducer with the part of the state it manages
@perjo927
perjo927 / undoable.js
Created September 8, 2020 14:50
Undoable reducer
import { CONSTS } from "../actions/index.js";
const {
actions: { UNDO, REDO },
} = CONSTS;
/*
Read more at:
https://redux.js.org/recipes/implementing-undo-history
@perjo927
perjo927 / todos.js
Created September 8, 2020 14:43
Todo Reducers
import { CONSTS } from "../actions/index.js";
const {
actions: { ADD, DELETE, TOGGLE },
} = CONSTS;
export const addTodo = (state, newTodo) => [...state, newTodo];
export const deleteTodo = (state, id) => state.filter((todo) => todo.id !== id);
@perjo927
perjo927 / visibility.js
Created September 8, 2020 14:29
Visibility reducer
import { CONSTS } from "../actions";
const {
actions: { SET_VISIBILITY },
visibilityFilters: { ALL },
} = CONSTS;
export const setVisibility = (state, filter) => filter;
export const visibilityReducer = (state = ALL, action) =>
@perjo927
perjo927 / actions.js
Last active September 9, 2020 05:37
Todo App Actions
export const CONSTS = {
actions: {
ADD: "ADD",
DELETE: "DELETE",
UNDO: "UNDO",
REDO: "REDO",
TOGGLE: "TOGGLE",
SET_VISIBILITY: "SET_VISIBILITY",
},
visibilityFilters: {
@perjo927
perjo927 / todos.test.js
Created September 8, 2020 13:47
Test Todo Generation
import {
createTodoBase,
createTodoItem,
getTodoItem,
} from "../src/factories/todo/index.js";
import assert from "assert";
describe("factories", () => {
describe("todo", () => {
@perjo927
perjo927 / todo.js
Created September 8, 2020 13:45
Create Todo Item
import { generateId } from "../id/index.js";
export const createTodoBase = (text) => ({ text, done: false });
export const createTodoItem = (todoObj, idObj) => ({
...todoObj,
...idObj,
});
export const getTodoItem = (text) => {
@perjo927
perjo927 / store.js
Created September 8, 2020 07:36
Create Redux Store
import { makeSubscriber } from "./subscribe";
import { makeStateHandlers } from "./state";
import { makeDispatcher } from "./dispatch";
export const createStore = (reducer, initialState = {}) => {
const stateContainer = [initialState];
const subscribers = [];
const stateHandlers = {
...makeStateHandlers(stateContainer),
};