This package is used for state management, it is not intended to become an alternative to Redux. It just provides a different approach to state management in React.
If you're looking for a simple, flexible, effective way to manage the global state of your React application, this package is for you. If you're new to Redux, you're confused with a lot of its concepts such as the store
, reducer
, action
, middleware
- Alright, go ahead with React RetiX.
Let's take a look at the detail below:
- Can use any where in your react application, not only in component
- Light-weight
- Easy to use
- Simple of architecture
npm i react-retix
- For registering a store, the same concept as
createStore
inRedux
- For watching state, the same concept as
useSelector
inReact Hooks + Redux
- For doing action, updating state, the same concept as
useDispatch
inReact Hooks + Redux
import React, { useState } from 'react';
import { MasterStore } from 'react-retix';
new MasterStore({ state });
const App = () => {
return <></>
};
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
import React from 'react';
import { useSubscriber } from 'react-retix';
const App = () => {
const masterStore = useSubscriber();
return <></>
};
import React from 'react';
import { useSubscriber } from 'react-retix';
const LoadingIndicator = () => {
const isLoading = useSubscriber('page.isLoading');
return isLoading && <Spinner />
};
import React from 'react';
import { useSubscriber } from 'react-retix';
const PostReaction = (post) => {
const { isAuthenticated } = useSubscriber('user');
const doLike = () => {
useEmitter({ isLiked: true });
}
return (
<div>
{
isAuthenticated ? <button onClick={doLike}>Like</button> : <button>Sign in</button>
}
</div>
)
}
import { useEmitter } from 'react-retix';
class PostService {
constructor () {
//
}
getPost () {
this.api.get('posts').then((data) => {
useEmitter({ post: data });
}).catch((err) => {
useEmitter({ errors: err });
}).finally(() => {
useEmitter({ isLoading: false });
});
}
}
To update a state, you can specify the path of an object
useEmitter(val, 'level1.level2.level3.level4');
instead of
useEmitter({
level1: {
level2: {
level3: {
level4: val
}
}
}
});
Both of them works the same, choose a comfortable one base on your use-case.
Highly noted that, due to data integrity purpose we decided to use deep merge for updating objects, for example:
Current state
{
level1: {
level21: true,
level22: 'xyz',
level23: {
level3: null
}
}
}
Update the state with new data
useEmitter({
level1: {
level21: false
}
});
The result would be
{
level1: {
level21: false, // updated with new value
level22: 'xyz', // not be removed
level23: { // not be removed
level3: null
}
}
}
It means all attributes of an object will be persisted as initial values, unless you try to force to remove them all by setting it value to empty object {}
or null
Force to remove all attributes
useEmitter({
level1: {} // or null also works
});
The result would be
{
level1: {}
};
React RetiX
recommend you to use service to handle business logic of your application.
If you have familiared with Redux
, you can imagine that services is the same as what reducers
do in Redux architecture.
Please checkout the example for further detail.
Pull requests are always welcome!
Thanks goes to these wonderful people (emoji key):
Vix Nguyen 🤔 💻 🚧 |
Vi Nguyen H.T. 💻 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!