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 strongly recommends the use of shallow immutable patterns for updating state. By separating reads and writes we maintain better control over the reactivity of our system without the risk of losing track of changes to our proxy when passed through layers of components. This is much more amplified with Stores compared to Signals."
    }), "\n", jsxs(_components.p, {
      children: ["Sometimes, however, mutation is just easier to reason about. That's why Solid provides an Immer inspired ", jsx(_components.code, {
        children: "produce"
      }), " store modifier that allows you to mutate a writable proxy version of your Store object inside your ", jsx(_components.code, {
        children: "setStore"
      }), " calls."]
    }), "\n", jsxs(_components.p, {
      children: ["This is a nice tool to have to allow small zones of mutation without relinquishing control. Let's use ", jsx(_components.code, {
        children: "produce"
      }), " on our Todos example by replacing our event handler code with:"]
    }), "\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: "setTodos"
        }), "(\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: "setTodos"
        }), "(\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: ["While ", jsx(_components.code, {
        children: "produce"
      }), " with Stores probably handles the vast majority of cases, Solid also has a mutable Store object that is available from ", jsx(_components.code, {
        children: "createMutable"
      }), ". While not the recommended approach for internal APIs, it is sometimes useful for interop or compatibility with 3rd party systems."]
    })]
  });
}
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-94614710.js.map
