Reaxy NPM | npm.io

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>
}