Skip to content

Commit

Permalink
Update docs to use constants
Browse files Browse the repository at this point in the history
Prefer the use of constants over string literal values in option
values
  • Loading branch information
Floris Bernard committed Dec 14, 2018
1 parent 24716c5 commit acda087
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 18 deletions.
38 changes: 22 additions & 16 deletions docs/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,18 +64,19 @@ An object with additional options.
- `reinitialize` If `true`, will call `initAction` again if any of the props defined in `initProps`
change after mount. This change is checked with strict equality (===) _Defaults to `true`_
- `initSelf` A string that indicates the behavior for initialization on the client
(`initMode == MODE_INIT_SELF`). Possible values:
- `"ASYNC"`{: style="color: #6A8759" } **default**{: .label .label-yellow} the component will
render immediately, even if `initAction` is still pending. It is recommended to use this option
and render a loading indicator or placeholder content until `initAction` is resolved. This
will give the user immediate feedback that something is being loaded. While the `initAction`
is pending, an `isInitializing` prop will be passed to the component.
- `"BLOCKING"`{: style="color: #6A8759" } this will cause this higher-order component not tot
mount the target component until the first initialization has completed. The component will
remain mounted during further re-initialization.
- `"UNMOUNT"`{: style="color: #6A8759" } same as `"BLOCKING"`{: style="color: #6A8759" } but it
will also unmount the component during re-initialization.
- `"NEVER"`{: style="color: #6A8759" } will only initialize on the server
(`initMode == MODE_INIT_SELF`). See an example usage below. Possible values:
- `INIT_SELF_ASYNC` = `"ASYNC"`{: style="color: #6A8759" } **default**{: .label .label-yellow} \\
the component will render immediately, even if `initAction` is still pending. It is recommended
to use this option and render a loading indicator or placeholder content until `initAction` is
resolved. This will give the user immediate feedback that something is being loaded. While the
`initAction` is pending, an `isInitializing` prop will be passed to the component.
- `INIT_SELF_BLOCKING` = `"BLOCKING"`{: style="color: #6A8759" } \\
this will cause this higher-order component not tot mount the target component until the first
initialization has completed. The component will remain mounted during further re-initialization.
- `INIT_SELF_UNMOUNT` = `"UNMOUNT"`{: style="color: #6A8759" } \\
same as `INIT_SELF_BLOCKING` but it will also unmount the component during re-initialization.
- `INIT_SELF_NEVER` = `"NEVER"`{: style="color: #6A8759" } \\
will only initialize on the server
(`initMode == MODE_PREPARE`). Initialization will be skipped on the client.
- `onError` Error handler for errors in `initAction`. If given, errors will be swallowed.
- `getPrepareKey: (componentId: string, propsArray: Array) => string` A function that generates a
Expand All @@ -101,17 +102,22 @@ An object with additional options.

``` jsx
// Post.js
import { withInitAction, INIT_SELF_BLOCKING } from 'react-redux-component-init';
import { loadPostData } from '../actions/api';

class Post extends React.Component {
// ...
}

export default withInitAction(
['id'],
({ id }, dispatch) => dispatch(loadPostData(id)),
{ allowLazy: true }
{ initSelf: INIT_SELF_BLOCKING }
)(Post);

```
``` jsx
// PostPage.js
import { withInitAction, prepareComponent } from 'react-redux-component-init';
import Post from './components/Post';
// ...
class PostPage extends React.Component {
Expand Down Expand Up @@ -203,7 +209,7 @@ this module
### Example
{: .no_toc }
```javascript
import { initMode, setInitMode } from 'react-redux-component-init';
import { initMode, MODE_INIT_SELF } from 'react-redux-component-init';
// ...
dispatch(setInitMode(initMode.MODE_INIT_SELF));
dispatch(setInitMode(MODE_INIT_SELF));
```
6 changes: 4 additions & 2 deletions docs/usage/loading-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ If you still want to prevent the entire component from mounting, it is also poss
`"BLOCKING"` or `"UNMOUNT"` option to `withInitAction()`. See the [api documentation](../api) for
more details.

```javascript
```jsx
import { withInitAction, INIT_SELF_UNMOUNT } from 'react-redux-component-init';

const UserAvatar = ({ image }) => (
<div className="user-avatar-wrapper">
<img src={image} />
Expand All @@ -58,7 +60,7 @@ const UserAvatar = ({ image }) => (
export default withInitAction(
['userId'],
({ userId }, dispatch) => dispatch(fetchUserAvatar(userId)),
{ initSelf: 'UNMOUNT' } // <== this will unmount our component if it is (re)initializing
{ initSelf: INIT_SELF_UNMOUNT } // <== this will unmount our component if it is (re)initializing
)(
connect(mapStateToProps)(UserAvatar)
);
Expand Down

0 comments on commit acda087

Please sign in to comment.