https://github.com/js2me/react-stonex
https://github.com/js2me/react-stonex
javascript react state-management typescript
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/js2me/react-stonex
- Owner: js2me
- License: mit
- Created: 2019-03-21T05:23:07.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-16T06:26:56.000Z (about 7 years ago)
- Last Synced: 2024-10-05T20:41:13.557Z (over 1 year ago)
- Topics: javascript, react, state-management, typescript
- Language: JavaScript
- Size: 298 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ReactJS + Stonex
ReactJS integration with Stonex
## How to use
Before at all need to install `react-stonex` (`yarn add react-stonex` or `npm i -S react-stonex`)
This library have dependencies (it should be installed in your project)
```
"react": "^16.4.2",
"react-dom": "^16.4.2",
"stonex": "^0.1.0-alpha"
```
In your React Stonex application:
1. Add `ReactStonexModifier` to your stonex
```
import { StonexStore } from 'stonex'
import { ReactStonexModifier } from 'react-stonex'
const store = new StonexStore(
{
// your modules
},
{
modifiers: [ReactStonexModifier],
}
)
```
2. Add to the root of the React render tree the `Provider` component and send `store` to him props
```
import store from 'path-to-your-store'
import { Provider } from 'react-stonex'
const Root = () => {
return (
// your react tree
)
}
```
3. Attach some components which you need to link with `Stonex` store using the `connect()` function
```
import { connect } from 'react-stonex'
const mapStoreToProps = (state, modules, ownProps) => {
return {
fruit: state.fruits.actualFruit,
createFruit: modules.fruits.createFruit,
// ownProps is not required to return
// because props of your cool component
// already will contains in component's instance
}
}
const WrappedCoolComponent = connect(mapStoreToProps)(YourCoolComponent)
// somewhere in react tree
```
That's all what you need to do to link your Stonex store with React :) Enjoy!