var lesson = {
	files: [
		{
			name: "main",
			content: "// @ts-nocheck\nimport { render } from \"solid-js/web\";\nimport { For } from \"solid-js\";\n\nimport useRedux from \"./useRedux\";\nimport reduxStore from \"./store\";\nimport actions from \"./actions\";\n\nconst App = () => {\n  const [store, { addTodo, toggleTodo }] = useRedux(\n    reduxStore,\n    actions\n  );\n  let input;\n  return (\n    <>\n      <div>\n        <input ref={input} />\n        <button\n          onClick={(e) => {\n            if (!input.value.trim()) return;\n            addTodo(input.value);\n            input.value = \"\";\n          }}\n        >\n          Add Todo\n        </button>\n      </div>\n      <For each={store.todos}>\n        {(todo) => {\n          const { id, text } = todo;\n          console.log(\"Create\", text)\n          return <div>\n            <input\n              type=\"checkbox\"\n              checked={todo.completed}\n              onchange={[toggleTodo, id]}\n            />\n            <span\n              style={{ \"text-decoration\": todo.completed ? \"line-through\" : \"none\"}}\n            >{text}</span>\n          </div>\n        }}\n      </For>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		},
		{
			name: "useRedux",
			content: "import { onCleanup } from \"solid-js\";\nimport { createStore, reconcile } from \"solid-js/store\";\n\nexport default function useRedux(store, actions) {\n  const [state, setState] = createStore(store.getState());\n  const unsubscribe = store.subscribe(\n    () => setState(store.getState())\n  );\n  onCleanup(() => unsubscribe());\n  return [\n    state,\n    mapActions(store, actions)\n  ];\n};\n\nfunction mapActions(store, actions) {\n  const mapped = {};\n  for (const key in actions) {\n    mapped[key] = (...args) => store.dispatch(actions[key](...args));\n  }\n  return mapped;\n}\n"
		},
		{
			name: "actions",
			content: "let nextTodoId = 0;\nexport default {\n  addTodo: text => ({ type: \"ADD_TODO\", id: ++nextTodoId, text }),\n  toggleTodo: id => ({ type: \"TOGGLE_TODO\", id })\n};\n"
		},
		{
			name: "store",
			content: "// @ts-nocheck\nimport { createStore } from 'redux';\n\n// todos reducer\nconst todos = (state = { todos: [] }, action) => {\n  switch (action.type) {\n    case \"ADD_TODO\":\n      return { todos: [\n        ...state.todos,\n        {\n          id: action.id,\n          text: action.text,\n          completed: false\n        }\n      ]};\n    case \"TOGGLE_TODO\":\n      return { todos: state.todos.map(todo => \n        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo\n      )};\n    default:\n      return state;\n  }\n};\n\nexport default createStore(todos);\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "// @ts-nocheck\nimport { render } from \"solid-js/web\";\nimport { For } from \"solid-js\";\n\nimport useRedux from \"./useRedux\";\nimport reduxStore from \"./store\";\nimport actions from \"./actions\";\n\nconst App = () => {\n  const [store, { addTodo, toggleTodo }] = useRedux(\n    reduxStore,\n    actions\n  );\n  let input;\n  return (\n    <>\n      <div>\n        <input ref={input} />\n        <button\n          onClick={(e) => {\n            if (!input.value.trim()) return;\n            addTodo(input.value);\n            input.value = \"\";\n          }}\n        >\n          Add Todo\n        </button>\n      </div>\n      <For each={store.todos}>\n        {(todo) => {\n          const { id, text } = todo;\n          console.log(\"Create\", text)\n          return <div>\n            <input\n              type=\"checkbox\"\n              checked={todo.completed}\n              onchange={[toggleTodo, id]}\n            />\n            <span\n              style={{ \"text-decoration\": todo.completed ? \"line-through\" : \"none\"}}\n            >{text}</span>\n          </div>\n        }}\n      </For>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		},
		{
			name: "useRedux",
			content: "import { onCleanup } from \"solid-js\";\nimport { createStore, reconcile } from \"solid-js/store\";\n\nexport default function useRedux(store, actions) {\n  const [state, setState] = createStore(store.getState());\n  const unsubscribe = store.subscribe(\n    () => setState(reconcile(store.getState()))\n  );\n  onCleanup(() => unsubscribe());\n  return [\n    state,\n    mapActions(store, actions)\n  ];\n};\n\nfunction mapActions(store, actions) {\n  const mapped = {};\n  for (const key in actions) {\n    mapped[key] = (...args) => store.dispatch(actions[key](...args));\n  }\n  return mapped;\n}\n"
		},
		{
			name: "actions",
			content: "let nextTodoId = 0;\nexport default {\n  addTodo: text => ({ type: \"ADD_TODO\", id: ++nextTodoId, text }),\n  toggleTodo: id => ({ type: \"TOGGLE_TODO\", id })\n};\n"
		},
		{
			name: "store",
			content: "// @ts-nocheck\nimport { createStore } from 'redux';\n\n// todos reducer\nconst todos = (state = { todos: [] }, action) => {\n  switch (action.type) {\n    case \"ADD_TODO\":\n      return { todos: [\n        ...state.todos,\n        {\n          id: action.id,\n          text: action.text,\n          completed: false\n        }\n      ]};\n    case \"TOGGLE_TODO\":\n      return { todos: state.todos.map(todo => \n        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo\n      )};\n    default:\n      return state;\n  }\n};\n\nexport default createStore(todos);\n"
		}
	]
};
var markdown = "Stores are most often created in Solid using Solid's Store proxies. Sometimes we wish to interface with immutable libraries like Redux, Apollo, or XState and need to perform granular updates against these.\n\nIn the example, we have a simple wrapper around Redux. You can see the implementation in `useRedux.tsx`. The definition of the store and the actions are in the remaining files.\n\nThe core behavior is that we created a Store object and subscribe to the Redux store to update state on update.\n\n```js\nconst [state, setState] = createStore(store.getState());\nconst unsubscribe = store.subscribe(\n  () => setState(store.getState())\n);\n```\nIf you click around the demo adding items and checking them off it seems to work pretty well. However, what isn't obvious is that the rendering is inefficient. Notice the console.log not only on create but whenever you check the box.\n\nThe reason is that Solid doesn't diff by default. It assumes the new item is new and replaces it. If your data changes granularly, you don't need to diff. But what if you do?\n\nSolid provides a diffing method `reconcile` that enhances the `setStore` call and lets us diff the data from these immutable sources, only notifying the granular updates.\n\nLet's update that code to:\n```js\nconst [state, setState] = createStore(store.getState());\nconst unsubscribe = store.subscribe(\n  () => setState(reconcile(store.getState()))\n);\n```\nNow the example works as you'd expect, only running the create code on create.\n\nThis isn't the only way to solve this and you've seen some frameworks have a `key` property on their template loop flows. The problem is that by making that a default part of the templating, you always need to run list reconciliation and always have to diff all the children for potential changes, even in compiled frameworks. A data-centric approach not only makes this applicable outside of templating but makes it opt in. When you consider that internal state management doesn't need this, it means we default to having the best performance.\n\nOf course, there's no problem using `reconcile` when you need it. Sometimes a simple reducer makes for a great way to organize data updates. `reconcile` shines here, making your own `useReducer` primitive:\n\n```js\nconst useReducer = (reducer, state) => {\n  const [store, setStore] = createStore(state);\n  const dispatch = (action) => {\n    state = reducer(state, action);\n    setStore(reconcile(state));\n  }\n  return [store, dispatch];\n};\n```\n\nThe behavior of `reconcile` is configurable. A custom `key` can be set and there is a `merge` option which ignores structural cloning and only diffs the leaves.";
var stores_immutable = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { stores_immutable as default, lesson, markdown, solved };
