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: [jsxs(_components.p, {
      children: ["Чаще всего сторы в Solid создаются с использованием Solid ", jsx(_components.code, {
        children: "Store"
      }), " прокси. Но иногда мы хотим использовать библиотеки с иммутабельной (", jsx(_components.code, {
        children: "immutable"
      }), ") моделью такие как Redux, Apollo или XState и мы хотим использовать точные обновления с ними."]
    }), "\n", jsxs(_components.p, {
      children: ["В этом примере мы разберем как создать простую обертку вокруг Redux. Вы можете увидеть реализацию в ", jsx(_components.code, {
        children: "useRedux.tsx"
      }), ". Определение стора и действий (", jsx(_components.code, {
        children: "actions"
      }), ") находятся в других файлах."]
    }), "\n", jsx(_components.p, {
      children: "Мы создали объект Store и подписались на хранилище Redux для обновления состояния при изменениях."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state, setState] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "(store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getState"
        }), "());\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " unsubscribe = store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "subscribe"
        }), "(\n  ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getState"
        }), "())\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Если вы поиграете с демо и добавите или отключите из него элементы то увидите, что оно хорошо работает. Однако не очевидно, что рендеринг неэффективен. Обратите внимание на console.log не только при создании, но и всякий раз, когда вы устанавливаете флажок."
    }), "\n", jsx(_components.p, {
      children: "Причина в том, что Solid по умолчанию не отслеживает изменения. Он предполагает, что каждый элемент является новым, и заменяет его. Если ваши данные меняются незначительно, то вам не нужно их отслеживать вам не нужно отслеживать изменения. Но что, если вам это необходимо?"
    }), "\n", jsxs(_components.p, {
      children: ["Solid предоставляет метод сравнения ", jsx(_components.code, {
        children: "reconcile"
      }), ", который расширяет возможности вызова", jsx(_components.code, {
        children: " setStore"
      }), " и позволяет нам сравнивать данные из этих иммутабельных (", jsx(_components.code, {
        children: "immutable"
      }), ") источников, уведомляя только о настоящих изменениях."]
    }), "\n", jsx(_components.p, {
      children: "Давайте обновим этот код до:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state, setState] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "(store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getState"
        }), "());\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " unsubscribe = store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "subscribe"
        }), "(\n  ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "reconcile"
        }), "(store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getState"
        }), "()))\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Теперь пример работает так, как и следовало ожидать, мы запускаем код для создания только в самом начале."
    }), "\n", jsxs(_components.p, {
      children: ["Это не единственный способ решить эту проблему, и вы видели, что некоторые фреймворки имеют свойство ", jsx(_components.code, {
        children: "key"
      }), " при рендере массива шаблонов с помощью цикла. Проблема в том, что, сделав это частью шаблона по умолчанию, вам всегда нужно запускать согласование списков и всегда нужно следить за всеми дочерними элементами на предмет потенциальных изменений, даже во фреймворках, которые компилируются. Подход, ориентированный на данные, не только позволяет применять это вне шаблонов, но и позволяет использовать их только тогда, когда вам необходимо. Если учесть, что внутреннему управлению состоянием это не нужно, это означает, что мы по умолчанию обеспечиваем лучшую производительность."]
    }), "\n", jsxs(_components.p, {
      children: ["Конечно, нет проблем с использованием ", jsx(_components.code, {
        children: "reconcile"
      }), ", когда оно вам нужно. Иногда простой редюсер - отличный способ организовать обновление данных. В данном случае мы сможем использовать ", jsx(_components.code, {
        children: "reconcile"
      }), " и создать наш собственный примитив", jsx(_components.code, {
        children: " useReducer"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useReducer"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "reducer, state"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [store, setStore] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "(state);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispatch"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "action"
        }), ") => {\n    state = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "reducer"
        }), "(state, action);\n    ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setStore"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "reconcile"
        }), "(state));\n  }\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [store, dispatch];\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Поведение ", jsx(_components.code, {
        children: "reconcile"
      }), " можно настроить. Мы можем установить собственный ", jsx(_components.code, {
        children: "key"
      }), ", и есть опция ", jsx(_components.code, {
        children: "merge"
      }), ", которая игнорирует структурное клонирование и различает только листья."]
    })]
  });
}
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-444a73e0.js.map
