React Redux
ApplicationBase
Your Application
component entry point inherits from this component. It performs setup of redux, UJS, and other functionality when rendered. This would be created for you if you used Breezy's generators. Components that inherits from ApplicationBase
will not work without implementing the following methods:
mapping
override this and return a mappingbetween your
prop
templates to the page component.visitAndRemote
override this and return an object withvisit
andremote
.If you used the generators, a customizable one has been created for you in
application_visit.js
Nav
A nav component for your application. It is used by the render method in ApplicationBase
.
navigateTo
Use to navigateTo
to perform a full-page navigation using your cached state.
If there is an existing page in your store navigateTo
will restore the props, render the correct component, and return true
. Otherwise, it will return false
. This is useful if you want to restore an existing page before making a call to visit
or remote
.
Parameter | Notes |
pageKey | Use your rails |
options | Additional options, see below. |
Options | Notes |
ownProps | Any additional props to be passed to the next page component. |
The RailsTag
component
RailsTag
componentWith this component, you can use pass the generated HTML from your Rails view helpers to React without the need for an additional wrapper div component. The component uses html-react-parser. React's click handlers will work as expected.
As an example:
Then somewhere in your component
Action Creators
visit
Makes an ajax call to a page, and sets the response to the pages
store. Use visit
when you want full page-to-page transitions on the user's last click. There can only ever be one visit at a time. If you happen to call visit
while another visit is taking place, it will abort the previous one.
visit
is used for full-page transitions and will strip the bzq
query string from your pathQuery parameters that target a specific node. The exception to this rule is if you use a bzq
query string with a placeholderKey
option. This is allowed because bzq
would have a page to graft onto.
Arguments | Type | Notes |
pathQuery |
| The path and query of the url you want to fetch from. The path will be prefixed with a |
fetchRequestOptionsAndMore |
| Any fetch request options plus extras. Note that breezy will override the following headers: |
fetchRequestOptionsAndMore | Type | Notes |
placeholderKey |
| When passing a url that has a |
Other options are passed on to |
Callback options | Type | Notes |
needsRefresh |
| If the new request has new JS assets to get - i.e., the last fingerprint is different from the new fingerprint, then it will return true. |
componentIdentifier |
| The screen that your react application should render next. |
page |
| The full parsed page response from your |
pageKey |
| The key that Breezy uses to store the response |
suggestedAction |
|
|
redirected |
|
|
rsp |
| The raw response object |
Additional | Type | Notes |
fetchArgs |
| The arguments passed to |
url |
| The full url, passed to |
pageKey |
| Location in the Breezy store where |
data-bz-visit
data-bz-visit
A UJS equivalent of visit
is available. For example:
or if you're using a form
data-bz-visit
also has 2 companion attributes:
data-bz-placeholder
will allow you to add a placeholder.data-bz-method
will set the method of the request (GET, POST, PUT, DELETE)for a
<a>
tag.
remote
Remote makes an ajax call and saves the response to the pages
store in async fashion. Use this if you want to update parts of the current page or preload other pages.
Unlike visit
, remote
will not strip any bzq
url parameters.
Shares the same arguments as visit
with a few differences:
suggestedAction
is not available as an option passed to your then-able function.placeholder
is not availableYou can override where the response is saved with a
pageKey
options
fetchRequestOptionsAndMore options | Type | Notes |
pageKey |
| Where the response should be saved. By default, it is the current url. |
Other options are passed on to |
data-bz-remote
data-bz-remote
A UJS equivalent of remote is available. Use this if you want to update parts of the current page, or another page in the Redux store without updating window.history
for example:
saveAndProcessPage
Save and process a rendered view from PropsTemplate and fetch any deferments.
Arguments | Type | Notes |
pageKey |
| The key that Breezy uses to store the response |
page |
| A rendered PropsTemplate |
copyPage
Copies an existing page in the store, and sets it to a different pageKey
. Useful for optimistic updates on the next page before you navigate.
Arguments | Type | Notes |
{from} |
| The key of the page you want to copy from. |
{to} |
| The key of the page you want to copy to. |
Searching for nodes
Breezy can search your content tree for a specific node. This is done by adding a bzq=keypath.to.node
in your URL param, then passing the params in your application.json.props
. PropsTemplate will ignore blocks that are not in the keypath, disable deferment and caching, and return the node. Breezy will then immutably set that node back onto its tree on the client-side. Fragments will also automatically be updated where needed. See our querying guide for more examples.
For example:
and in your application.json.props
Updating Fragments
A Fragment is a way to mark a node as shared across all pages. They can only be enabled as an option on partials using PropsTemplate
For example:
This metadata can then be used by your reducers to make updates that span across pages.
Last updated