Skip to content

Instantly share code, notes, and snippets.

@JoelCodes
Created May 1, 2020 05:30
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 JoelCodes/a63b97d00ab2337827ef2d94079d133a to your computer and use it in GitHub Desktop.
Save JoelCodes/a63b97d00ab2337827ef2d94079d133a to your computer and use it in GitHub Desktop.

TWIL Immer Demo

This is a quick demo of Immer.js

From this video

Instructions

  • npm install
  • node index.js
const { produce } = require('immer');
const tasks = [
{id: 1, name: 'Record Video', done: false},
{id: 2, name: 'Edit Video', done: false}
];
// DARK ARTS
const modifiedTasks = produce(tasks, (draft) => {
draft.push({id: 3, name: 'Publish Video', done: false});
draft[0].done = true;
});
console.log('Tasks', tasks);
console.log('Modified', modifiedTasks);
console.log('Tasks Are Equal:', tasks === modifiedTasks);
console.log('First Tasks are Equal: ', tasks[0] === modifiedTasks[0]);
// const modifiedTasks = tasks.map((task, i) => {
// return i === 0 ?{...task, done: true} : task;
// });
// const modifiedTasks = [
// ...tasks.slice(0, 0),
// {...tasks[0], done:true},
// ...tasks.slice(1)
// ];
// tasks[0].done = true;
// Might Corrupt the initial data
// tasks before === tasks after
{
"name": "immer-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Joel Shinness <me@joelshinness.com> (http://joelshinness.com)",
"license": "ISC",
"dependencies": {
"immer": "^6.0.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment