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 = "Чаще всего сторы в Solid создаются с использованием Solid `Store` прокси. Но иногда мы хотим использовать библиотеки с иммутабельной (`immutable`) моделью такие как Redux, Apollo или XState и мы хотим использовать точные обновления с ними.\n\nВ этом примере мы разберем как создать простую обертку вокруг Redux. Вы можете увидеть реализацию в `useRedux.tsx`. Определение стора и действий (`actions`) находятся в других файлах.\n\nМы создали объект Store и подписались на хранилище Redux для обновления состояния при изменениях.\n\n```js\nconst [state, setState] = createStore(store.getState());\nconst unsubscribe = store.subscribe(\n  () => setState(store.getState())\n);\n```\n\nЕсли вы поиграете с демо и добавите или отключите из него элементы то увидите, что оно хорошо работает. Однако не очевидно, что рендеринг неэффективен. Обратите внимание на console.log не только при создании, но и всякий раз, когда вы устанавливаете флажок.\n\nПричина в том, что Solid по умолчанию не отслеживает изменения. Он предполагает, что каждый элемент является новым, и заменяет его. Если ваши данные меняются незначительно, то вам не нужно их отслеживать вам не нужно отслеживать изменения. Но что, если вам это необходимо?\n\nSolid предоставляет метод сравнения `reconcile`, который расширяет возможности вызова` setStore` и позволяет нам сравнивать данные из этих иммутабельных (`immutable`) источников, уведомляя только о настоящих изменениях.\n\nДавайте обновим этот код до:\n\n```js\nconst [state, setState] = createStore(store.getState());\nconst unsubscribe = store.subscribe(\n  () => setState(reconcile(store.getState()))\n);\n```\n\nТеперь пример работает так, как и следовало ожидать, мы запускаем код для создания только в самом начале.\n\nЭто не единственный способ решить эту проблему, и вы видели, что некоторые фреймворки имеют свойство `key` при рендере массива шаблонов с помощью цикла. Проблема в том, что, сделав это частью шаблона по умолчанию, вам всегда нужно запускать согласование списков и всегда нужно следить за всеми дочерними элементами на предмет потенциальных изменений, даже во фреймворках, которые компилируются. Подход, ориентированный на данные, не только позволяет применять это вне шаблонов, но и позволяет использовать их только тогда, когда вам необходимо. Если учесть, что внутреннему управлению состоянием это не нужно, это означает, что мы по умолчанию обеспечиваем лучшую производительность.\n\nКонечно, нет проблем с использованием `reconcile`, когда оно вам нужно. Иногда простой редюсер - отличный способ организовать обновление данных. В данном случае мы сможем использовать `reconcile` и создать наш собственный примитив` useReducer`:\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\nПоведение `reconcile` можно настроить. Мы можем установить собственный `key`, и есть опция `merge`, которая игнорирует структурное клонирование и различает только листья.";
var stores_immutable = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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