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 an args, and 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 from 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 })
    }
  }
}

Dispatching fetchPosts

const Post = (props) => {

  const posts = useStore('posts')
  const fetchPosts = useAction('posts/fetchPosts')

  useEffect(() => fetchPosts(), [])

  return <div>{posts.items.map(...)}</div>
}

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