import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Solid empfielt wärmstens die Verwendung von flachen unveränderlichen Schemata, um den Zustand zu aktualisieren. Indem wir Lese- und Schreibzugriffe voneinander trennen, behalten wir mehr Kontrolle über die Reaktivität unseres Systems ohne das Risiko, Änderungen an unserem Proxy zu übersehen, wenn sie durch verschiedene Ebenen unserer Komponenten laufen. Das ist noch mehr der Fall, wenn man Stores mit Signalen vergleicht."
    }), "\n", jsxs(_components.p, {
      children: ["Manchmal ist dennoch Mutation einfacher zu verstehen. Aus diesem Grund hat Solid einen von Immer inspirierten ", jsx(_components.code, {
        children: "produce"
      }), "-Modifikator für Stores, der es erlaubt eine schreibbare Proxy-Version des Stores innerhalb des ", jsx(_components.code, {
        children: "setStore"
      }), "-Aufrufs zu mutieren."]
    }), "\n", jsxs(_components.p, {
      children: ["Das ist ein nettes Werkzeug, dass es erlaubt, kleine Bereiche zu mutieren, ohne Kontrolle aufzugeben. Nutzen wir ", jsx(_components.code, {
        children: "produce"
      }), " in unserem Todo-Beispiel, indem wir den Event-Handler mit dem folgenden Code ersetzen:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "text"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setStore"
        }), "(\n    ", jsx(_components.span, {
          className: "hljs-string",
          children: "'todos'"
        }), ",\n    ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "produce"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "todos"
          }), ") =>"]
        }), " {\n      todos.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "push"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "id"
        }), ": ++todoId, text, ", jsx(_components.span, {
          className: "hljs-attr",
          children: "completed"
        }), ": ", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), " });\n    }),\n  );\n};\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setStore"
        }), "(\n    ", jsx(_components.span, {
          className: "hljs-string",
          children: "'todos'"
        }), ",\n    ", jsxs(_components.span, {
          className: "hljs-function",
          children: [jsx(_components.span, {
            className: "hljs-params",
            children: "todo"
          }), " =>"]
        }), " todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " === id,\n    ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "produce"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "todo"
          }), ") =>"]
        }), " (todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "completed"
        }), " = !todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "completed"
        }), ")),\n  );\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Während ", jsx(_components.code, {
        children: "produce"
      }), " mit Stores vermutlich die überwiegende Mehrheit aller Anwendungsfälle abdeckt, hat Solid auch einen mutierbaren Store, der mit ", jsx(_components.code, {
        children: "createMutable"
      }), " verfügbar gemacht wird. Während dies nicht die empfohlene Herangehensweise für interne APIs ist, kann es mitunter nützlich für Interoperabilität oder Kompatibilität zu Sytemen anderer Parteien sein."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-97a03b08.js.map
