mirror of
https://github.com/strapi/strapi.git
synced 2025-08-19 06:08:50 +00:00
542 lines
91 KiB
HTML
542 lines
91 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Front-end Use Cases | Strapi Docs</title>
|
|
<meta name="description" content="API creation made simple, secure and fast.">
|
|
|
|
|
|
<link rel="preload" href="/documentation/assets/css/styles.a8210063.css" as="style"><link rel="preload" href="/documentation/assets/js/app.a8210063.js" as="script"><link rel="preload" href="/documentation/assets/js/64.d53bdeb7.js" as="script"><link rel="prefetch" href="/documentation/assets/js/28.9b077c15.js"><link rel="prefetch" href="/documentation/assets/css/1.styles.77d89b12.css"><link rel="prefetch" href="/documentation/assets/js/1.77d89b12.js"><link rel="prefetch" href="/documentation/assets/css/2.styles.08038ddb.css"><link rel="prefetch" href="/documentation/assets/js/2.08038ddb.js"><link rel="prefetch" href="/documentation/assets/js/3.4d92d5e3.js"><link rel="prefetch" href="/documentation/assets/js/4.385ae6a0.js"><link rel="prefetch" href="/documentation/assets/js/5.edd21cb3.js"><link rel="prefetch" href="/documentation/assets/js/6.fd6e4b24.js"><link rel="prefetch" href="/documentation/assets/js/7.e1f45fa9.js"><link rel="prefetch" href="/documentation/assets/js/8.dc78e1c2.js"><link rel="prefetch" href="/documentation/assets/js/9.fd6a21e6.js"><link rel="prefetch" href="/documentation/assets/js/10.f9e7d997.js"><link rel="prefetch" href="/documentation/assets/js/11.bfb9de0f.js"><link rel="prefetch" href="/documentation/assets/js/12.124227d1.js"><link rel="prefetch" href="/documentation/assets/js/13.d8092700.js"><link rel="prefetch" href="/documentation/assets/js/14.7cfd4cb8.js"><link rel="prefetch" href="/documentation/assets/js/15.55a20f7c.js"><link rel="prefetch" href="/documentation/assets/js/16.5c84c402.js"><link rel="prefetch" href="/documentation/assets/js/17.1c93d494.js"><link rel="prefetch" href="/documentation/assets/js/18.e1f1758f.js"><link rel="prefetch" href="/documentation/assets/js/19.8d1b00cd.js"><link rel="prefetch" href="/documentation/assets/js/20.856d7bdd.js"><link rel="prefetch" href="/documentation/assets/js/21.6f851286.js"><link rel="prefetch" href="/documentation/assets/js/22.7ddb4e1d.js"><link rel="prefetch" href="/documentation/assets/js/23.15e5a0c3.js"><link rel="prefetch" href="/documentation/assets/js/24.6fdf34d0.js"><link rel="prefetch" href="/documentation/assets/js/25.21c9a549.js"><link rel="prefetch" href="/documentation/assets/js/26.6608295c.js"><link rel="prefetch" href="/documentation/assets/js/27.2c9596ea.js"><link rel="prefetch" href="/documentation/assets/js/29.8ea8ecc1.js"><link rel="prefetch" href="/documentation/assets/js/30.5d2829b8.js"><link rel="prefetch" href="/documentation/assets/js/31.fad00a3a.js"><link rel="prefetch" href="/documentation/assets/js/32.a6900221.js"><link rel="prefetch" href="/documentation/assets/js/33.bbfb3084.js"><link rel="prefetch" href="/documentation/assets/js/34.0eb2f8aa.js"><link rel="prefetch" href="/documentation/assets/js/35.76c29241.js"><link rel="prefetch" href="/documentation/assets/js/36.dfcc07a1.js"><link rel="prefetch" href="/documentation/assets/js/37.173a8112.js"><link rel="prefetch" href="/documentation/assets/js/38.b86fac79.js"><link rel="prefetch" href="/documentation/assets/js/39.a7d50afe.js"><link rel="prefetch" href="/documentation/assets/js/40.0415492d.js"><link rel="prefetch" href="/documentation/assets/js/41.5ef681df.js"><link rel="prefetch" href="/documentation/assets/js/42.fdd80522.js"><link rel="prefetch" href="/documentation/assets/js/43.03b496f2.js"><link rel="prefetch" href="/documentation/assets/js/44.3f55a367.js"><link rel="prefetch" href="/documentation/assets/js/45.6746c3dc.js"><link rel="prefetch" href="/documentation/assets/js/46.ff6bc353.js"><link rel="prefetch" href="/documentation/assets/js/47.53b7147a.js"><link rel="prefetch" href="/documentation/assets/js/48.31a883aa.js"><link rel="prefetch" href="/documentation/assets/js/49.18bd1a60.js"><link rel="prefetch" href="/documentation/assets/js/50.9b6079cd.js"><link rel="prefetch" href="/documentation/assets/js/51.b67aee1b.js"><link rel="prefetch" href="/documentation/assets/js/52.62bc63b6.js"><link rel="prefetch" href="/documentation/assets/js/53.2c567c55.js"><link rel="prefetch" href="/documentation/assets/js/54.6cc10d25.js"><link rel="prefetch" href="/documentation/assets/js/55.7faca13f.js"><link rel="prefetch" href="/documentation/assets/js/56.0b06ad54.js"><link rel="prefetch" href="/documentation/assets/js/57.a87c48df.js"><link rel="prefetch" href="/documentation/assets/js/58.1c6547d9.js"><link rel="prefetch" href="/documentation/assets/js/59.06f908d7.js"><link rel="prefetch" href="/documentation/assets/js/60.b5156b8d.js"><link rel="prefetch" href="/documentation/assets/js/61.1d5cafa9.js"><link rel="prefetch" href="/documentation/assets/js/62.ccacebe2.js"><link rel="prefetch" href="/documentation/assets/js/63.66946dde.js"><link rel="prefetch" href="/documentation/assets/js/65.0cd2da1f.js"><link rel="prefetch" href="/documentation/assets/js/66.03059dce.js"><link rel="prefetch" href="/documentation/assets/js/67.6f988923.js"><link rel="prefetch" href="/documentation/assets/js/68.303c1a05.js"><link rel="prefetch" href="/documentation/assets/js/69.3f4ed952.js"><link rel="prefetch" href="/documentation/assets/js/70.531d76be.js"><link rel="prefetch" href="/documentation/assets/js/71.ab3e74fc.js">
|
|
<link rel="stylesheet" href="/documentation/assets/css/styles.a8210063.css"><link rel="stylesheet" href="/documentation/assets/css/1.styles.77d89b12.css"><link rel="stylesheet" href="/documentation/assets/css/2.styles.08038ddb.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/documentation/" class="home-link router-link-active"><!----> <span class="site-name">
|
|
Strapi Docs
|
|
</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/strapi/strapi" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"> <a href="https://github.com/strapi/strapi" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div><select class="version-selector"><option value="/3.x.x/" selected="selected">Version 3.x.x</option><option value="/1.x.x/">Version 1.x.x</option></select></div> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>UsefulLinks</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/" class="sidebar-link">Introduction</a></li><li><a href="https://strapi.io" class="sidebar-link">Strapi Website</a></li><li><a href="https://github.com/strapi/strapi" class="sidebar-link">GitHub Repository</a></li><li><a href="https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md" class="sidebar-link">Contribution Guide</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Getting started</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/getting-started/installation.html" class="sidebar-link">Installation</a></li><li><a href="/documentation/3.x.x/getting-started/quick-start.html" class="sidebar-link">Quick start</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Globals</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/api-reference/reference.html" class="sidebar-link">API Reference</a></li><li><a href="/documentation/3.x.x/cli/CLI.html" class="sidebar-link">Command Line Interface (CLI)</a></li><li><a href="/documentation/3.x.x/concepts/concepts.html" class="sidebar-link">Concepts</a></li><li><a href="/documentation/3.x.x/configurations/configurations.html" class="sidebar-link">Configurations</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/guides/authentication.html" class="sidebar-link">Authentication</a></li><li><a href="/documentation/3.x.x/guides/controllers.html" class="sidebar-link">Controllers</a></li><li><a href="/documentation/3.x.x/guides/deployment.html" class="sidebar-link">Deployment</a></li><li><a href="/documentation/3.x.x/guides/email.html" class="sidebar-link">Email</a></li><li><a href="/documentation/3.x.x/guides/filters.html" class="sidebar-link">Filters</a></li><li><a href="/documentation/3.x.x/guides/graphql.html" class="sidebar-link">GraphQL</a></li><li><a href="/documentation/3.x.x/guides/i18n.html" class="sidebar-link">Internationalization</a></li><li><a href="/documentation/3.x.x/guides/models.html" class="sidebar-link">Models</a></li><li><a href="/documentation/3.x.x/guides/policies.html" class="sidebar-link">Policies</a></li><li><a href="/documentation/3.x.x/guides/public-assets.html" class="sidebar-link">Public Assets</a></li><li><a href="/documentation/3.x.x/guides/requests.html" class="sidebar-link">Request</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Advanced</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/3.x.x/advanced/customize-admin.html" class="sidebar-link">Admin panel</a></li><li><a href="/documentation/3.x.x/advanced/hooks.html" class="sidebar-link">Hooks</a></li><li><a href="/documentation/3.x.x/advanced/logging.html" class="sidebar-link">Logging</a></li><li><a href="/documentation/3.x.x/advanced/middlewares.html" class="sidebar-link">Middlewares</a></li><li><a href="/documentation/3.x.x/advanced/usage-tracking.html" class="sidebar-link">Usage tracking</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Help</span> <!----></p> <ul class="sidebar-group-items"><li><a href="https://github.com/strapi/strapi/wiki" class="sidebar-link">Migration guides</a></li><li><a href="/documentation/3.x.x/tutorials/" class="sidebar-link">Tutorials</a></li></ul></div></li></ul> </div> <div class="page"><div class="content"><h1 id="front-end-use-cases"><a href="#front-end-use-cases" aria-hidden="true" class="header-anchor">#</a> Front-end Use Cases</h1> <p>This section gives use cases examples on front-end plugin development.</p> <h1 id="plugin-advanced-usage"><a href="#plugin-advanced-usage" aria-hidden="true" class="header-anchor">#</a> Plugin advanced usage</h1> <p>This section contains advanced resources to develop plugins.</p> <h2 id="inject-design"><a href="#inject-design" aria-hidden="true" class="header-anchor">#</a> Inject design</h2> <p>The <code>ExtendComponent</code> allows you to inject design from one plugin into another.</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <p>Let's say that you want to enable another plugin to inject a component into the top area of your plugin's container called <code>FooPage</code>;</p> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/actions.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>
|
|
<span class="token constant">ON_TOGGLE_SHOW_LOREM</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constants'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onToggleShowLorem</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
type<span class="token punctuation">:</span> <span class="token constant">ON_TOGGLE_SHOW_LOREM</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/index.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> bindActionCreators<span class="token punctuation">,</span> compose <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStructuredSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'reselect'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Import the ExtendComponent</span>
|
|
<span class="token keyword">import</span> ExtendComponent <span class="token keyword">from</span> <span class="token string">'components/ExtendComponent'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Utils</span>
|
|
<span class="token keyword">import</span> injectReducer <span class="token keyword">from</span> <span class="token string">'utils/injectReducer'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Actions</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> onToggleShowLorem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./action'</span>
|
|
|
|
<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducer'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Selectors</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> makeSelectShowLorem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./selectors'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">class</span> <span class="token class-name">FooPage</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> lorem <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>showLorem <span class="token operator">?</span> <span class="token operator"><</span>p<span class="token operator">></span>Lorem ipsum dolor sit amet<span class="token punctuation">,</span> consectetur adipiscing<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>h1<span class="token operator">></span>This is FooPage container<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span>
|
|
<span class="token operator"><</span>ExtendComponent
|
|
area<span class="token operator">=</span><span class="token string">"top"</span>
|
|
container<span class="token operator">=</span><span class="token string">"FooPage"</span>
|
|
plugin<span class="token operator">=</span><span class="token string">"my-plugin"</span>
|
|
<span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token punctuation">{</span>lorem<span class="token punctuation">}</span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
FooPage<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
onToggleShowLorem<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
showLorem<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">mapDispatchToProps</span><span class="token punctuation">(</span>dispatch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token function">bindActionCreators</span><span class="token punctuation">(</span>
|
|
<span class="token punctuation">{</span>
|
|
onToggleShowLorem<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
dispatch<span class="token punctuation">,</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">const</span> mapStateToProps <span class="token operator">=</span> <span class="token function">createStructuredSelector</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
showLorem<span class="token punctuation">:</span> <span class="token function">makeSelectShowLorem</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> withConnect <span class="token operator">=</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapDispatchToProps<span class="token punctuation">,</span> mapDispatchToProps<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> withReducer <span class="token operator">=</span> <span class="token function">injectReducer</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'fooPage'</span><span class="token punctuation">,</span> reducer <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">compose</span><span class="token punctuation">(</span>
|
|
withReducer<span class="token punctuation">,</span>
|
|
withConnect<span class="token punctuation">,</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">(</span>FooPage<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/reducer.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> fromJS <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'immutable'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">ON_TOGGLE_SHOW_LOREM</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constants'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> initialState <span class="token operator">=</span> <span class="token function">fromJS</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
showLorem<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">fooPageReducer</span><span class="token punctuation">(</span>state<span class="token operator">=</span> initialState<span class="token punctuation">,</span> action<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">case</span> <span class="token constant">ON_TOGGLE_SHOW_LOREM</span><span class="token punctuation">:</span>
|
|
<span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'showLorem'</span><span class="token punctuation">,</span> <span class="token operator">!</span>state<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'showLorem'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">default</span><span class="token punctuation">:</span>
|
|
<span class="token keyword">return</span> state<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> fooPageReducer<span class="token punctuation">;</span>
|
|
</code></pre></div><p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/selectors.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'reselect'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">/**
|
|
* Direct selector to the fooPage state domain
|
|
*/</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token function-variable function">selectFooPageDomain</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> state <span class="token operator">=></span> state<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'fooPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">/**
|
|
* Other specific selectors
|
|
*/</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token function-variable function">makeSelectShowLorem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">createSelector</span><span class="token punctuation">(</span>
|
|
<span class="token function">selectFooPageDomain</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">(</span>substate<span class="token punctuation">)</span> <span class="token operator">=></span> substate<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'showLorem'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token punctuation">{</span> makeSelectShowLorem <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>That's all now your plugin's container is injectable!</p> <p>Let's see how to inject a React Component from a plugin into another.</p> <h3 id="create-your-injectedcomponent"><a href="#create-your-injectedcomponent" aria-hidden="true" class="header-anchor">#</a> Create your injectedComponent</h3> <p><strong>Path -</strong> <code>./plugins/another-plugin/admin/src/extendables/BarContainer/index.js</code>;</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Import our Button component</span>
|
|
<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'components/Button'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Other imports such as actions, selectors, sagas, reducer...</span>
|
|
|
|
<span class="token keyword">class</span> <span class="token class-name">BarContainer</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>Button primary onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onToggleShowLorem<span class="token punctuation">}</span><span class="token operator">></span>
|
|
Click me to show lorem paragraph
|
|
<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
BarContainer<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
onToggleShowLorem<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
BarContainer<span class="token punctuation">.</span>defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
onToggleShowLorem<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> BarContainer<span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="tell-the-admin-that-you-want-to-inject-a-react-component-from-a-plugin-into-another"><a href="#tell-the-admin-that-you-want-to-inject-a-react-component-from-a-plugin-into-another" aria-hidden="true" class="header-anchor">#</a> Tell the admin that you want to inject a React Component from a plugin into another</h3> <p>You have to create a file called <code>injectedComponents.js</code> at the root of your <code>another-plugin</code> src folder.</p> <p><strong>Path —</strong> <code>./plugins/another-plugin/admin/src/injectedComponents.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> BarContainer <span class="token keyword">from</span> <span class="token string">'extendables/BarContainer'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// export an array containing all the injected components</span>
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
area<span class="token punctuation">:</span> <span class="token string">'top'</span><span class="token punctuation">,</span>
|
|
container<span class="token punctuation">:</span> <span class="token string">'FooPage'</span><span class="token punctuation">,</span>
|
|
injectedComponent<span class="token punctuation">:</span> BarContainer<span class="token punctuation">,</span>
|
|
plugin<span class="token punctuation">:</span> <span class="token string">'my-plugin'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Just by doing so, the <code>another-plugin</code> will add a <code>Button</code> which toggles the <code>lorem</code> paragraph in the <code>FooPage</code> view.</p> <hr> <h2 id="routeless-container-store-injection"><a href="#routeless-container-store-injection" aria-hidden="true" class="header-anchor">#</a> Routeless container store injection</h2> <p>If you have a container which can be a child of several other containers (i.e. it doesn't have a route); you'll have to inject it directly in the <code>./plugins/my-plugin/admin/src/containers/App/index.js</code> file as follows :</p> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/App/index.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// ...</span>
|
|
<span class="token keyword">import</span> fooReducer <span class="token keyword">from</span> <span class="token string">'containers/Foo/reducer'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> fooSaga <span class="token keyword">from</span> <span class="token string">'container/Foo/sagas'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">import</span> saga <span class="token keyword">from</span> <span class="token string">'./sagas'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> makeSelectFoo <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./selectors'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// ...</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>app<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Switch<span class="token operator">></span>
|
|
<span class="token punctuation">{</span><span class="token operator">*</span><span class="token regex">/ List of all your routes here */</span><span class="token punctuation">}</span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Switch<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">// ...</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">mapDispatchToProps</span><span class="token punctuation">(</span>dispatch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token function">bindActionCreators</span><span class="token punctuation">(</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
dispatch
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">const</span> mapStateToProps <span class="token operator">=</span> <span class="token function">createStructuredSelector</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> withConnect <span class="token operator">=</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapStateToProps<span class="token punctuation">,</span> mapDispatchToProps<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Foo reducer</span>
|
|
<span class="token keyword">const</span> withFooReducer <span class="token operator">=</span> <span class="token function">injectReducer</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> reducer<span class="token punctuation">:</span> fooReducer <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Global reducer</span>
|
|
<span class="token keyword">const</span> withReducer <span class="token operator">=</span> <span class="token function">injectReducer</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'global'</span><span class="token punctuation">,</span> reducer <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Foo saga</span>
|
|
<span class="token keyword">const</span> withFooSaga <span class="token operator">=</span> <span class="token function">injectSaga</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> saga<span class="token punctuation">:</span> fooSaga <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Global saga</span>
|
|
<span class="token keyword">const</span> withSaga <span class="token operator">=</span> <span class="token function">injectSaga</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'global'</span><span class="token punctuation">,</span> saga <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">compose</span><span class="token punctuation">(</span>
|
|
withFooReducer<span class="token punctuation">,</span>
|
|
withReducer<span class="token punctuation">,</span>
|
|
withFooSaga<span class="token punctuation">,</span>
|
|
withSaga<span class="token punctuation">,</span>
|
|
withConnect<span class="token punctuation">,</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><hr> <h2 id="execute-logic-before-mounting-the-plugin"><a href="#execute-logic-before-mounting-the-plugin" aria-hidden="true" class="header-anchor">#</a> Execute logic before mounting the plugin</h2> <p>You can execute a business logic before your plugin is being mounted.</p> <h3 id="usage"><a href="#usage" aria-hidden="true" class="header-anchor">#</a> Usage</h3> <p>To do this, you need to create <code>bootstrap.js</code> file at the root of your <code>src</code> plugin's folder.
|
|
This file must contains a default functions that returns a <code>Promise</code>.</p> <h4 id="example-2"><a href="#example-2" aria-hidden="true" class="header-anchor">#</a> Example</h4> <p>In this example, we want to populate the left menu with links that will refer to our Content Types.</p> <p><strong>Path —</strong> <code>./app/plugins/content-manager/admin/src/bootstrap.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> generateMenu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'containers/App/sagas'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// This method is executed before the load of the plugin</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">bootstrap</span> <span class="token operator">=</span> <span class="token punctuation">(</span>plugin<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token function">generateMenu</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>menu <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
plugin<span class="token punctuation">.</span>leftMenuSections <span class="token operator">=</span> menu<span class="token punctuation">;</span>
|
|
|
|
<span class="token function">resolve</span><span class="token punctuation">(</span>plugin<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>e <span class="token operator">=></span> <span class="token function">reject</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> bootstrap<span class="token punctuation">;</span>
|
|
</code></pre></div><hr> <h2 id="prevent-plugin-rendering"><a href="#prevent-plugin-rendering" aria-hidden="true" class="header-anchor">#</a> Prevent plugin rendering</h2> <p>You can prevent your plugin from being rendered if some conditions aren't met.</p> <h3 id="usage-2"><a href="#usage-2" aria-hidden="true" class="header-anchor">#</a> Usage</h3> <p>To disable your plugin's rendering, you can simply create <code>requirements.js</code> file at the root of your <code>src</code> plugin's folder.
|
|
This file must contain a default function that returns a <code>Promise</code>.</p> <h4 id="example-3"><a href="#example-3" aria-hidden="true" class="header-anchor">#</a> Example</h4> <p>Let's say that you want to disable your plugin if the server autoReload config is disabled in development mode.</p> <p><strong>Path —</strong> <code>./app/config/environments/development/server.json</code>.</p> <div class="language- extra-class"><pre class="language-text"><code>{
|
|
"host": "localhost",
|
|
"port": 1337,
|
|
"autoReload": {
|
|
"enabled": true
|
|
},
|
|
"cron": {
|
|
"enabled": false
|
|
}
|
|
}
|
|
</code></pre></div><p>You'll first create a request to check if the <code>autoReload</code> config is enabled.</p> <p><strong>Path —</strong> <code>./app/plugins/my-plugin/config/routes.json</code>.</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
|
|
<span class="token property">"routes"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token property">"method"</span><span class="token operator">:</span> <span class="token string">"GET"</span><span class="token punctuation">,</span>
|
|
<span class="token property">"path"</span><span class="token operator">:</span> <span class="token string">"/autoReload"</span><span class="token punctuation">,</span>
|
|
<span class="token property">"handler"</span><span class="token operator">:</span> <span class="token string">"MyPlugin.autoReload"</span><span class="token punctuation">,</span>
|
|
<span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token property">"policies"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>Then the associated handler:</p> <p><strong>Path —</strong> <code>./app/plugins/my-plugin/controllers/MyPlugin.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> _ <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'lodash'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> send <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'koa-send'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
autoReload<span class="token punctuation">:</span> <span class="token keyword">async</span> ctx <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
ctx<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> autoReload<span class="token punctuation">:</span> _<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>strapi<span class="token punctuation">.</span>config<span class="token punctuation">.</span>environments<span class="token punctuation">,</span> <span class="token string">'development.server.autoReload'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>Finally, you'll create a file called <code>requirements.js</code>at the root of your plugin's src folder.</p> <p>The default function exported must return a <code>Promise</code>.
|
|
If you wan't to prevent the plugin from being rendered you'll have to set <code>plugin.preventComponentRendering = true;</code>.
|
|
In this case, you'll have to set:</p> <div class="language-js extra-class"><pre class="language-js"><code>plugin<span class="token punctuation">.</span>blockerComponentProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
blockerComponentTitle<span class="token punctuation">:</span> <span class="token string">'my-plugin.blocker.title'</span><span class="token punctuation">,</span>
|
|
blockerComponentDescription<span class="token punctuation">:</span> <span class="token string">'my-plugin.blocker.description'</span><span class="token punctuation">,</span>
|
|
blockerComponentIcon<span class="token punctuation">:</span> <span class="token string">'fa-refresh'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>To follow the example above:</p> <p><strong>Path —</strong> <code>./app/plugins/my-plugin/admin/src/requirements.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Use our request helper</span>
|
|
<span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'utils/request'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token function-variable function">shouldRenderCompo</span> <span class="token operator">=</span> <span class="token punctuation">(</span>plugin<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> request<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token function">request</span><span class="token punctuation">(</span><span class="token string">'/my-plugin/autoReload'</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>response <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// If autoReload is enabled the response is `{ autoReload: true }`</span>
|
|
plugin<span class="token punctuation">.</span>preventComponentRendering <span class="token operator">=</span> <span class="token operator">!</span>response<span class="token punctuation">.</span>autoReload<span class="token punctuation">;</span>
|
|
<span class="token comment">// Set the BlockerComponent props</span>
|
|
plugin<span class="token punctuation">.</span>blockerComponentProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
blockerComponentTitle<span class="token punctuation">:</span> <span class="token string">'my-plugin.blocker.title'</span><span class="token punctuation">,</span>
|
|
blockerComponentDescription<span class="token punctuation">:</span> <span class="token string">'my-plugin.blocker.description'</span><span class="token punctuation">,</span>
|
|
blockerComponentIcon<span class="token punctuation">:</span> <span class="token string">'fa-refresh'</span><span class="token punctuation">,</span>
|
|
blockerComponentContent<span class="token punctuation">:</span> <span class="token string">'renderIde'</span><span class="token punctuation">,</span> <span class="token comment">// renderIde will add an ide section that shows the development environment server.json config</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">return</span> <span class="token function">resolve</span><span class="token punctuation">(</span>plugin<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err <span class="token operator">=></span> <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> shouldRenderCompo<span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="customization"><a href="#customization" aria-hidden="true" class="header-anchor">#</a> Customization</h3> <p>You can render your own custom blocker by doing as follows:</p> <p><strong>Path —</strong> <code>./app/plugins/my-plugin/admin/src/requirements.js</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Use our request helper</span>
|
|
<span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'utils/request'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Your custom blockerComponentProps</span>
|
|
<span class="token keyword">import</span> MyCustomBlockerComponent <span class="token keyword">from</span> <span class="token string">'components/MyCustomBlockerComponent'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token function-variable function">shouldRenderCompo</span> <span class="token operator">=</span> <span class="token punctuation">(</span>plugin<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> request<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token function">request</span><span class="token punctuation">(</span><span class="token string">'/my-plugin/autoReload'</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>response <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// If autoReload is enabled the response is `{ autoReload: true }`</span>
|
|
plugin<span class="token punctuation">.</span>preventComponentRendering <span class="token operator">=</span> <span class="token operator">!</span>response<span class="token punctuation">.</span>autoReload<span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Tell which component to be rendered instead</span>
|
|
plugin<span class="token punctuation">.</span>blockerComponent <span class="token operator">=</span> MyCustomBlockerComponent<span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">return</span> <span class="token function">resolve</span><span class="token punctuation">(</span>plugin<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err <span class="token operator">=></span> <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> shouldRenderCompo<span class="token punctuation">;</span>
|
|
</code></pre></div><hr> <h2 id="using-react-redux-and-sagas"><a href="#using-react-redux-and-sagas" aria-hidden="true" class="header-anchor">#</a> Using React/Redux and sagas</h2> <p>If your application is going to interact with some back-end application for data, we recommend using redux saga for side effect management.
|
|
This short tutorial will show how to fetch data using actions/reducer/sagas.</p> <h3 id="constants-declaration"><a href="#constants-declaration" aria-hidden="true" class="header-anchor">#</a> Constants declaration</h3> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/constants.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">DATA_FETCH</span> <span class="token operator">=</span> <span class="token string">'MyPlugin/FooPage/DATA_FETCH'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">DATA_FETCH_ERROR</span> <span class="token operator">=</span> <span class="token string">'MyPlugin/FooPage/DATA_FETCH_ERROR'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">DATA_FETCH_SUCCEEDED</span> <span class="token operator">=</span> <span class="token string">'MyPlugin/FooPage/DATA_FETCH_SUCCEEDED'</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="actions-declaration"><a href="#actions-declaration" aria-hidden="true" class="header-anchor">#</a> Actions declaration</h3> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/actions.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>
|
|
<span class="token constant">DATA_FETCH</span><span class="token punctuation">,</span>
|
|
<span class="token constant">DATA_FETCH_ERROR</span><span class="token punctuation">,</span>
|
|
<span class="token constant">DATA_FETCH_SUCCEEDED</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constants'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">dataFetch</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
type<span class="token punctuation">:</span> <span class="token constant">DATA_FETCH</span><span class="token punctuation">,</span>
|
|
params<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">dataFetchError</span><span class="token punctuation">(</span>errorMessage<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
type<span class="token punctuation">:</span> <span class="token constant">DATA_FETCH_ERROR</span><span class="token punctuation">,</span>
|
|
errorMessage<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">dataFetchSucceeded</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
type<span class="token punctuation">:</span> <span class="token constant">DATA_FETCH_SUCCEEDED</span><span class="token punctuation">,</span>
|
|
data<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><h3 id="reducer"><a href="#reducer" aria-hidden="true" class="header-anchor">#</a> Reducer</h3> <p>We strongly recommend to use <a href="https://facebook.github.io/immutable-js/" target="_blank" rel="noopener noreferrer">Immutable.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> to structure your data.</p> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/reducer.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> fromJS<span class="token punctuation">,</span> Map <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'immutable'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
|
<span class="token constant">DATA_FETCH_ERROR</span><span class="token punctuation">,</span>
|
|
<span class="token constant">DATA_FETCH_SUCCEEDED</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constants'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> initialState <span class="token operator">=</span> <span class="token function">fromJS</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
data<span class="token punctuation">:</span> <span class="token function">Map</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
error<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
errorMessage<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
|
loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">fooPageReducer</span><span class="token punctuation">(</span>state <span class="token operator">=</span> initialState<span class="token punctuation">,</span> action<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">case</span> <span class="token constant">DATA_FETCH_ERROR</span><span class="token punctuation">:</span>
|
|
<span class="token keyword">return</span> state
|
|
<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'errorMessage'</span><span class="token punctuation">,</span> action<span class="token punctuation">.</span>errorMessage<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'loading'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">case</span> <span class="token constant">DATA_FETCH_SUCCEEDED</span><span class="token punctuation">:</span>
|
|
<span class="token keyword">return</span> state
|
|
<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'data'</span><span class="token punctuation">,</span> <span class="token function">Map</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'errorMessage'</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token string">'loading'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">default</span><span class="token punctuation">:</span>
|
|
<span class="token keyword">return</span> state<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> fooPageReducer<span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="sagas"><a href="#sagas" aria-hidden="true" class="header-anchor">#</a> Sagas</h3> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/sagas.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">LOCATION_CHANGE</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-redux'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> takeLatest<span class="token punctuation">,</span> put<span class="token punctuation">,</span> fork<span class="token punctuation">,</span> call<span class="token punctuation">,</span> take<span class="token punctuation">,</span> cancel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux-saga/effects'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Use our request helper</span>
|
|
<span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'utils/request'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Actions</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> dataFetchError<span class="token punctuation">,</span> dataFetchSucceeded <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./actions'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">DATA_FETCH</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constants'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">fetchData</span><span class="token punctuation">(</span>action<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> requestUrl <span class="token operator">=</span> <span class="token template-string"><span class="token string">`/baseUrl/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>action<span class="token punctuation">.</span>params<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> opts <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
method<span class="token punctuation">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Fetch data</span>
|
|
<span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token function">call</span><span class="token punctuation">(</span>request<span class="token punctuation">,</span> requestUrl<span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Pass the response to the reducer</span>
|
|
<span class="token keyword">yield</span> <span class="token function">put</span><span class="token punctuation">(</span><span class="token function">dataFetchSucceeded</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">yield</span> <span class="token function">put</span><span class="token punctuation">(</span><span class="token function">dataFetchError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">// Individual export for testing</span>
|
|
<span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">defaultSaga</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Listen to DATA_FETCH event</span>
|
|
<span class="token keyword">const</span> fetchDataWatcher <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token function">fork</span><span class="token punctuation">(</span>takeLatest<span class="token punctuation">,</span> <span class="token constant">DATA_FETCH</span><span class="token punctuation">,</span> fetchData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Cancel watcher</span>
|
|
<span class="token keyword">yield</span> <span class="token function">take</span><span class="token punctuation">(</span><span class="token constant">LOCATION_CHANGE</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">yield</span> <span class="token function">cancel</span><span class="token punctuation">(</span>fetchDataWatcher<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> defaultSaga<span class="token punctuation">;</span>
|
|
</code></pre></div><p>N.B. You can use a selector in your sagas :</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> put<span class="token punctuation">,</span> select<span class="token punctuation">,</span> fork<span class="token punctuation">,</span> call<span class="token punctuation">,</span> take<span class="token punctuation">,</span> cancel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux-saga/effects'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> makeSelectUserName <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./selectors'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> userName <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token function">select</span><span class="token punctuation">(</span><span class="token function">makeSelectUserName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">defaultSaga</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> defaultSaga<span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="selectors"><a href="#selectors" aria-hidden="true" class="header-anchor">#</a> Selectors</h3> <p><a href="https://github.com/reactjs/reselect" target="_blank" rel="noopener noreferrer">Reselect<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 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:</p> <ol><li>Computational power</li> <li>Memoization</li> <li>Composability</li></ol> <p>Creating a selector:</p> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/selectors.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createSelector <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'reselect'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">/**
|
|
* Direct selector to the fooPage state domain
|
|
*/</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">selectFooPageDomain</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> state <span class="token operator">=></span> state<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'fooPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">/**
|
|
* Other specific selectors
|
|
*/</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token function-variable function">makeSelectLoading</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">createSelector</span><span class="token punctuation">(</span>
|
|
<span class="token function">selectFooPageDomain</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">(</span>substate<span class="token punctuation">)</span> <span class="token operator">=></span> substate<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'loading'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">/**
|
|
* Default selector used by FooPage
|
|
*/</span>
|
|
|
|
<span class="token keyword">const</span> <span class="token function-variable function">selectFooPage</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">createSelector</span><span class="token punctuation">(</span>
|
|
<span class="token function">selectFooDomain</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">(</span>substate<span class="token punctuation">)</span> <span class="token operator">=></span> substate<span class="token punctuation">.</span><span class="token function">toJS</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> selectFooPage<span class="token punctuation">;</span>
|
|
<span class="token keyword">export</span> <span class="token punctuation">{</span> makeSelectLoading <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
</code></pre></div><h4 id="example-4"><a href="#example-4" aria-hidden="true" class="header-anchor">#</a> Example</h4> <p><strong>Path —</strong> <code>./plugins/my-plugin/admin/src/containers/FooPage/index.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> bindActionCreators <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> connect<span class="token punctuation">,</span> compose <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Main router</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'app'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Utils</span>
|
|
<span class="token keyword">import</span> injectSaga <span class="token keyword">from</span> <span class="token string">'utils/injectSaga'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> injectReducer <span class="token keyword">from</span> <span class="token string">'utils/injectReducer'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Actions</span>
|
|
<span class="token keyword">import</span> <span class="token punctuation">{</span> dataFetch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./actions'</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// sagas</span>
|
|
<span class="token keyword">import</span> saga <span class="token keyword">from</span> <span class="token string">'./sagas'</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Selectors</span>
|
|
<span class="token keyword">import</span> selectFooPage <span class="token keyword">from</span> <span class="token string">'./selectors'</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Reducer</span>
|
|
<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducer'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">FooPage</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>error <span class="token operator">!==</span> nextProps<span class="token punctuation">.</span>error <span class="token operator">&&</span> nextProps<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
strapi<span class="token punctuation">.</span>notification<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>errorMessage<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token function">componentDidUpdate</span><span class="token punctuation">(</span>prevProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>prevProps<span class="token punctuation">.</span>match<span class="token punctuation">.</span>pathname <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>pathname<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">dataFetch</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params<span class="token punctuation">.</span>bar<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>error<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span>An error occurred<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>h4<span class="token operator">></span>Data display<span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span>
|
|
<span class="token operator"><</span>span<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>data<span class="token punctuation">.</span>foo<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span>span<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>data<span class="token punctuation">.</span>bar<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
FooPage<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
data<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>object<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
dataFetch<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
error<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
errorMessage<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
match<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>object<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> mapStateToProps <span class="token operator">=</span> <span class="token function">selectFoo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">function</span> <span class="token function">mapDispatchToProps</span><span class="token punctuation">(</span>dispatch<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token function">bindActionCreators</span><span class="token punctuation">(</span>
|
|
<span class="token punctuation">{</span>
|
|
dataFetch<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
dispatch
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token keyword">const</span> withConnect <span class="token operator">=</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapStateToProps<span class="token punctuation">,</span> mapDispatchToProps<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> withReducer <span class="token operator">=</span> <span class="token function">injectReducer</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'fooPage'</span><span class="token punctuation">,</span> reducer <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> withSagas <span class="token operator">=</span> <span class="token function">injectSaga</span><span class="token punctuation">(</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'fooPage'</span><span class="token punctuation">,</span> saga <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">compose</span><span class="token punctuation">(</span>
|
|
withReducer<span class="token punctuation">,</span>
|
|
withSagas<span class="token punctuation">,</span>
|
|
withConnect<span class="token punctuation">,</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">(</span>FooPage<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/strapi/strapi/edit/master/docs/3.x.x/plugin-development/frontend-use-cases.md" target="_blank" rel="noopener noreferrer">Improve this page</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <!----> </div></div></div>
|
|
<script src="/documentation/assets/js/64.d53bdeb7.js" defer></script><script src="/documentation/assets/js/app.a8210063.js" defer></script>
|
|
</body>
|
|
</html>
|