Idiomatic resourceful context
Idiomatic resourceful context.
React Hoax requires React 16.8.3 or later.
``
npm install --save react-hoax
This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.
If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes react-hoax available as a global object, you can grab a pre-built version from cdnjs. We _don’t_ recommend this approach for any serious application, as most of the libraries complementary to React Hoax are only available on npm.
React Hoax itself is a small state management library. It includes some opinionated patterns that help you use React context more effectively.
It helps simplify a lot of common use cases in the React world, including providers setup, creating reducers and selectors.
It also helps with state normalization for resources.
#### For multiple resources here
The byId pattern is persuaded, check the initialState.
Example,
`
import { makeCollectionHoax } from "react-hoax";
const {
Provider,
useCollection,
useMember,
useSelector,
useAction,
useResourceSelector
} = makeCollectionHoax("myCustomResource", {
resourceOptions: {
initialState: {
title: "",
description: "",
keywords: [],
industry: "",
offer: ""
}
}
});
`
As you can see, React Hoax provides you with the essentials to start coding right away.
This will create a Context provider, with the state:
`
{
loading: true,
loaded: false,
processing: false,
byId: {},
ids: []
}
Which works for multiple resources of the same type.
Adding a resource of id=1, will change the state to:
`
{
loading: false,
loaded: true,
processing: false,
byId: {
1: {
loading: true,
loaded: false,
processing: false,
errors: {},
pristine: {},
// plus our custom attributes needed
title: "",
description: "",
keywords: [],
industry: "",
offer: ""
}
},
ids: [1]
}
`
#### For a single resource here
It keeps it simple, check the initialState.
Example,
`
import { makeMemberHoax } from "react-hoax";
const initialState = {
name: ""
};
const UserHoax = makeMemberHoax("user", { initialState });
const NameField = UserHoax.Field.Input({fieldKey: "name"});
const UserForm = () => (
);
`
React Hoax provides global actions for the everyday needs:
`
initialize
update
updateBatch
updateOnChange
reset
resetPristine
resetPristineKey
startFetch
doneFetch
failFetch
startProcess
doneProcess
but you can add more yourself.
_documentation is coming soon..._
React Hoax provides opinionated reducers for member and collection resources.
They make use the global actions, but also, are extendable.
Hooks provided by the React Hoax, are of two flavors.
#### Selectors
For performant retrieving part of state (or all of it) of a resource. (i.e. useResourceSelector, useSelector)useAction
But, also, for getting the action needed for dispatch from the resource's context. (i.e. )
#### useMember & useCollection
Are you bored of passing down the components tree props and actions for simple CRUD operations on the state?
Those two selector hooks on steroids will save you the time and the sanity!
Check the API of useMember:
`
const [value, setValue, error, setError] = useMember({fieldKey: 'keyOnYourState'});
How fun is that?
Now check the API of useCollection _(it's basically helping with values on state that are arrays)_
`
const {collection, setCollection, add, push, edit, remove, reorder, error, setError} = useCollection({fieldKey: 'keyOnYourState'});
_COMING SOON_
Well yes! Just kidding, of course, check Redux - same applies here, more or less.
Enjoy!