vuex-for-react v1.0.3

WHY?

While trying to learn Redux after using Vuex, only one thing comes to mind. Why is there so much boiler plate?

This library allows you to manage state in React easily with no unnecessary boiler plate.

Installation

using npm:

npm i vuex-for-react

using yarn

yarn add vuex-for-react

Setup guide

We strongly recommend you create a separate folder where you will initialize your modules and keep its files in there.

We prefer creating a separate folder called "store". e.g.

src/store/index.js

The content of index.js:

import Store from 'vuex-for-react'
import someModule from './someModule'  
  
export default Store.init({  
  someModule,  
})

Then just import this file somewhere in the beginning of your project. Files like index.js or App.js could be the perfect choice.

Module structure

We use structure very similar to Vuex.

export default {
  state: {  
    currentPage: 0,  
  },
  mutations: {  
	setCurrentPage(setState, pageNumber) {  
	  setState('currentPage', pageNumber)  
    },
  },  
  actions: {    
	 someAction({ commit }, pageNumber) {  
	   // Your code here...  
  
	   // We always call following methods as root name
	   // commit('ui/setCurrentPage', pageNumber)
	   // dispatch('ui/doFunStuff', pageNumber)
	 },  
     doFunStuff(_, pageNumber) {  
       // do some other fun  
     },  
   },
 }

Usage inside react component

There's no need to connect your React-component with react-x in anyway.

mapActions

To get actions from your modules all you need is:

import { mapActions } from 'vuex-for-react'
import { state } from 'vuex-for-react'

const { mapActions } = useContext(state)

const { someAction, someOtherAction } = mapActions({
  someAction: 'someModule/someAction',
  someOtherAction: 'someOtherModule/someOtherAction',
})

and since we did that, we may call these actions. Take note, that they can only receive one argument, but we can always make it an object.

someAction({ isntThisCoolAndSimple: true }) 

mapState

Pretty much the same thing as with mapState

with functional component

import { useContext } from 'react'
import { state } from 'vuex-for-react'

const { mapState } = useContext(state)
const { someStateField, someOtherStateField } = mapState({
  someStateField: 'someModule/someStateField',
  someOtherStateField: 'someOtherModule/someStateField',
})

After we have that, we may just display given data as simple as just:

return (
  <React.Fragment>
    my awesome data: {someStateField}, and here is some other: {someOtherStateField}
  </React.Fragment>
)

dispatch and commit

Actions inside one of your modules receive 2 arguments. The first one is object with 2 functions in it. The second one is your argument.

The first argument consists of 2 functions, that you can use, to call other actions, or call some mutation.

actions: {
  myAction({ dispatch, commit }) {
    // dispatch('module/action', { some: 'data' })
    // commit('setSomething', 'value')
  }
}