A simple way to do global app state in a React app.
import { createActions, reviser } from 'reviser'
createActions({
fetchData: async (store, id) => {
store.set({
fetching: true
})
try {
let data = await api.fetch(id)
store.set({
fetching: false,
text: data.text
})
} catch (err) {
store.set({
fetching: false,
error: err
})
}
}
})
class MyComponent extends React.Component {
componentDidMount () {
this.props.fetchData(this.props.id)
}
render () {
return (
<div>{this.props.text}</div>
)
}
}
const WrappedComponent = reviser(
(state) => {
return {
text: state.text || ''
}
},
(actions) => {
return {
fetchData: actions.fetchData
}
}
)(MyComponent)
<WrappedComponent id='1' />
There are only 3 things to know. Actions, Store, and the reviser
higher order component.
Just create some actions. Actions always get passed an instance of the store so the action can modify the store in it's body.
import { createActions } from 'reviser'
createActions({
login: async (store, username, password) => {
store.set({
login: {
pending: true,
loggedIn: false
}
})
try {
await api.login(username, password)
store.set({
login: {
pending: false,
loggedIn: true
}
})
} catch (err) {
store.set({
login: {
pending: false,
error: err
}
})
}
}
})
Whatever your action returns will be returned when your action is called. Need to await
an action? Just make sure it's an async function or it returns a promise. There are no hidden layers or indirection between how the store gets updated. It always happens in an action.
The store is an instance of a simmutable store. Simmutable ensures that when you set a value in the store, it doesn't modify the existing store. It will merge the provided change into the existing store, overwriting values provided in the change, and leaving other existing values in the store.
store.set({
a: {
b: 1,
c: 2
}
})
/*
{
a: {
b: 1,
c: 2
}
}
*/
store.set({
a: {
b: 2
}
})
/*
{
a: {
b: 2,
c: 2
}
}
*/
The store is frozen at all times by default to ensure that you do not modify it in development. To turn this off simply do this in your app entry point
import { store } from 'reviser'
store.config.shouldFreeze = false
The Reviser HOC acts very similar to the connect
HOC from react-redux
import { reviser } from 'reviser'
class MyComponent extends React.Component {
componentDidMount () {
this.props.fetchData()
}
render () {
return (
<div>{this.props.username}</div>
)
}
}
export default reviser(
(state) => {
return {
username: state.login.username
}
},
(actions) => {
return {
fetchData: actions.fetchUserData
}
}
)(MyComponent)
reviser
takes two parameters. The first is a function that gets the current app state and then returns a subset of that state to pass in as props to the component. The second is also a function that does the same but for a list of all actions that have been created. reviser
then returns a function that you pass in the component that you would like wrapped. A reviser
component will also listen for changes in the store and then rerender itself when it detects a change in the store.