mirror of
https://github.com/strapi/strapi.git
synced 2025-08-22 23:59:17 +00:00
1 line
124 KiB
JavaScript
1 line
124 KiB
JavaScript
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{175:function(t,s,a){"use strict";a.r(s);var n=a(0),o=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._v(" "),a("p",[t._v("This section gives use cases examples on front-end plugin development.")]),t._v(" "),t._m(1),t._v(" "),a("p",[t._v("This section contains advanced resources to develop plugins.")]),t._v(" "),t._m(2),t._v(" "),t._m(3),t._v(" "),t._m(4),t._v(" "),t._m(5),t._v(" "),t._m(6),t._v(" "),t._m(7),t._m(8),t._v(" "),t._m(9),t._m(10),t._v(" "),t._m(11),t._m(12),t._v(" "),t._m(13),a("p",[t._v("That's all now your plugin's container is injectable!")]),t._v(" "),a("p",[t._v("Let's see how to inject a React Component from a plugin into another.")]),t._v(" "),t._m(14),t._v(" "),t._m(15),t._v(" "),t._m(16),t._m(17),t._v(" "),t._m(18),t._v(" "),t._m(19),t._v(" "),t._m(20),t._m(21),t._v(" "),a("hr"),t._v(" "),t._m(22),t._v(" "),t._m(23),t._v(" "),t._m(24),t._v(" "),t._m(25),a("hr"),t._v(" "),t._m(26),t._v(" "),a("p",[t._v("You can execute a business logic before your plugin is being mounted.")]),t._v(" "),t._m(27),t._v(" "),t._m(28),t._v(" "),t._m(29),t._v(" "),a("p",[t._v("In this example, we want to populate the left menu with links that will refer to our Content Types.")]),t._v(" "),t._m(30),t._v(" "),t._m(31),a("hr"),t._v(" "),t._m(32),t._v(" "),a("p",[t._v("You can prevent your plugin from being rendered if some conditions aren't met.")]),t._v(" "),t._m(33),t._v(" "),t._m(34),t._v(" "),t._m(35),t._v(" "),a("p",[t._v("Let's say that you want to disable your plugin if the server autoReload config is disabled in development mode.")]),t._v(" "),t._m(36),t._v(" "),t._m(37),t._m(38),t._v(" "),t._m(39),t._v(" "),t._m(40),a("p",[t._v("Then the associated handler:")]),t._v(" "),t._m(41),t._v(" "),t._m(42),t._m(43),t._v(" "),t._m(44),t._v(" "),t._m(45),a("p",[t._v("To follow the example above:")]),t._v(" "),t._m(46),t._v(" "),t._m(47),t._m(48),t._v(" "),a("p",[t._v("You can render your own custom blocker by doing as follows:")]),t._v(" "),t._m(49),t._v(" "),t._m(50),a("hr"),t._v(" "),t._m(51),t._v(" "),a("p",[t._v("If your application is going to interact with some back-end application for data, we recommend using redux saga for side effect management.\nThis short tutorial will show how to fetch data using actions/reducer/sagas.")]),t._v(" "),t._m(52),t._v(" "),t._m(53),t._v(" "),t._m(54),t._m(55),t._v(" "),t._m(56),t._v(" "),t._m(57),t._m(58),t._v(" "),a("p",[t._v("We strongly recommend to use "),a("a",{attrs:{href:"https://facebook.github.io/immutable-js/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Immutable.js"),a("OutboundLink")],1),t._v(" to structure your data.")]),t._v(" "),t._m(59),t._v(" "),t._m(60),t._m(61),t._v(" "),t._m(62),t._v(" "),t._m(63),a("p",[t._v("N.B. You can use a selector in your sagas :")]),t._v(" "),t._m(64),t._m(65),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/reactjs/reselect",target:"_blank",rel:"noopener noreferrer"}},[t._v("Reselect"),a("OutboundLink")],1),t._v(" is a library used for slicing your redux state and providing only the relevant sub-tree to a react component. It has three key features:")]),t._v(" "),t._m(66),t._v(" "),a("p",[t._v("Creating a selector:")]),t._v(" "),t._m(67),t._v(" "),t._m(68),t._m(69),t._v(" "),t._m(70),t._v(" "),t._m(71)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"front-end-use-cases"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#front-end-use-cases","aria-hidden":"true"}},[this._v("#")]),this._v(" Front-end Use Cases")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"plugin-advanced-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#plugin-advanced-usage","aria-hidden":"true"}},[this._v("#")]),this._v(" Plugin advanced usage")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"inject-design"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#inject-design","aria-hidden":"true"}},[this._v("#")
|