reaxy
v1.0.2
Published
React state managment with hooks
Downloads
5
Readme
Reaxy
React easy state managment with hooks
Installing
Install with npm
npm install --save reaxy
Install with yarn
yarn add reaxy
Getting started
Create the main store
import { createStore } from 'reaxy'
const store = createStore({})
Adding module to the store Each module has state, actions and effects
const module = {
state: {},
actions: {},
effects: {}
}
const store = createStore({
moduleName: module
})
Passing the store to the provider that wrap our app
import { Provider } from 'reaxy'
<Provider store={store}>
// Application...
</Provider>
useStore
Using the store with the useStore
hook
import { useStore } from 'reaxy'
const store = useStore()
Using a module by pass the module name to useStore
hook
const counter = useStore('counter')
Example
// Module
const counter = {
state: {
count: 0
}
}
// Create store
const store = createStore({ counter })
// Using the store
const App = () => {
const store = useStore()
return <div>{store.counter.count}</div>
}
// Wrap our app with provider and passing it the store
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('app'))
useDispatch
dispatching an action with useDispatch
hook
First Define an action in the module, it takes state and payload as args
Mutating the state directly, and the magic of immer.js will create new immutable state
const counter = {
state: {
count: 0
},
actions: {
increment(state) {
state.count++
}
}
}
The dispatch type will be [moduleName]/[actionName]
import { useDispatch } from 'reaxy'
const dispatch = useDispatch()
dispatch({ type: 'counter/increment' })
useAction
dispatching an action directly with useAction
hook
useAction takes a path that will be [moduleName]/[actionName]
import { useAction } from 'reaxy'
const reset = useAction('counter/reset')
<button onClick={() => reset(0)}>reset</button>
const counter = {
...
actions: {
...,
reset(state, payload) {
state.count = payload
}
}
}
Async
For working with side effects calls, we will use effects in the module
Each effect will be async function and it takes dispatch as an args
const module = {
...
effects: {
func: async (dispatch) => {
// dispatch an action
}
}
}
Example
Defining new effect for fetching posts form remote api
const posts = {
state: {
items: []
},
actions: {
setPosts(state, posts) {
state.items = posts
}
},
effects: {
fetchPosts: async (dispatch) => {
// Fetching posts
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await res.json()
// set posts
dispatch({ type: 'posts/setPosts', payload: data })
}
}
}
Dispatch fetchPosts
const Post = (props) => {
const posts = useStore('posts')
const fetchPosts = useAction('posts/fetchPosts')
useEffect(() => fetchPosts(), [])
return <div>{posts.items.map(...)}</div>
}
Running the tests
Clone the project then run
npm run dev
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
- Abdalhadi Abdallah - Initial work - hadiab
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE.md file for details