react-vuex

React bindings for Vuex inspired by react-redux project.

Installation

react-vuex requires React 16.0+, Vue 2.0+ and Vuex 3.0+

npm install --save react-vuex

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Documentation

To look at some example projects, take a look at the examples section of this repo.

• API
  • <Provider store>
  • connect([mapStateToProps], [mapDispatchToProps], [mapCommitToProps], [mapGetterToProps])(Component)

Example use

• configure your store with state, getters, mutations and actions, according to Vuex documentation

  1/*
  2 * actions.js
  3 */
  4
  5export const INCREMENT_ASYNC = 'INCREMENT_ASYNC';
  6
  7export default {
  8  incrementAsync: (value = 1) => ({
  9    type: INCREMENT_ASYNC,
  10    value,
  11  }),
  12};
  13
  14
  15/*
  16 * mutations.js
  17 */
  18
  19export const INCREMENT = 'INCREMENT';
  20export const INCREMENT_START = 'INCREMENT_START';
  21export const INCREMENT_STOP = 'INCREMENT_STOP';
  22
  23export default {
  24  increment: (value = 1) => ({
  25    type: INCREMENT,
  26    value,
  27  }),
  28};
  29
  30
  31/*
  32 * store.js
  33 */
  34
  35import Vue from 'vue';
  36import Vuex from 'vuex';
  37import { INCREMENT, INCREMENT_START, INCREMENT_STOP } from './mutations';
  38import { INCREMENT_ASYNC } from './actions';
  39
  40Vue.use(Vuex);
  41
  42export default new Vuex.Store({
  43  state: {
  44    count: 0,
  45    isIncrementing: false,
  46  },
  47  getters: {
  48    countGreaterThan2: (state, getters) => state.count > 2,
  49  },
  50  mutations: {
  51    [INCREMENT](state) {
  52      state.count += 1;
  53    },
  54    [INCREMENT_START](state) {
  55      state.isIncrementing = true;
  56    },
  57    [INCREMENT_STOP](state) {
  58      state.isIncrementing = false;
  59    },
  60  },
  61  actions: {
  62    [INCREMENT_ASYNC]({ commit, state }, payload) {
  63      commit(INCREMENT_START);
  64      return new Promise((resolve) => {
  65        setTimeout(() => {
  66          commit(INCREMENT);
  67          resolve();
  68        }, 500);
  69      }).then(() => commit(INCREMENT_STOP))
  70        .then(() => state.count);
  71    },
  72  },
  73});

• use Provider in your app

  This will pass the store to all subcomponents of the app

  1/*
  2 * index.js
  3 */
  4
  5import React from 'react';
  6import { render } from 'react-dom';
  7import { Provider } from 'react-vuex';
  8import App from './components/App';
  9import store from './store';
  10
  11render(
  12  <Provider store={store}>
  13    <App />
  14  </Provider>,
  15  document.getElementById('root'),
  16);

• create your container component mapping state, dispatch, commit and getter to the store

  1/*
  2 * containers/MyContainer.js
  3 */
  4
  5import { connect } from 'react-vuex';
  6import MyComponent from '../components/MyComponent';
  7import mutations from '../mutations';
  8import actions from '../actions';
  9
  10const mapStateToProps = (state, ownProps) => ({
  11  myCount: state.count,
  12});
  13const mapDispatchToProps = (dispatch, ownProps) => ({
  14  onIncrementAsync: val => dispatch(actions.incrementAsync(val)),
  15});
  16const mapCommitToProps = (commit, ownProps) => ({
  17  onIncrement: () => commit(mutations.increment()),
  18});
  19const mapGetterToProps = (getter, ownProps) => ({
  20  isGreaterThan2: getter.countGreaterThan2,
  21});
  22
  23const MyContainer = connect(
  24  mapStateToProps,
  25  mapDispatchToProps,
  26  mapCommitToProps,
  27  mapGetterToProps,
  28)(MyComponent);
  29
  30export default MyContainer;

• create your presentational component using mapped props

  1/*
  2 * components/MyComponent.js
  3 */
  4
  5import React from 'react';
  6import PropTypes from 'prop-types';
  7
  8export default class MyComponent extends React.PureComponent {
  9  constructor(props, context) {
  10    super(props, context);
  11    this.handleInc = this.handleInc.bind(this);
  12    this.handleIncAsync = this.handleIncAsync.bind(this);
  13  }
  14  handleInc() {
  15    if (this.props.onIncrement) {
  16      this.props.onIncrement();
  17    }
  18  }
  19  handleIncAsync() {
  20    if (this.props.onIncrementAsync) {
  21      this.props.onIncrementAsync().then(() => {}));
  22    }
  23  }
  24  render() {
  25    return (
  26      <div>
  27        Count is {this.props.myCount !== undefined && `${this.props.myCount}, `}
  28        greater than 2: {this.props.isGreaterThan2 ? 'yes' : 'no'}
  29        {this.props.onIncrement &&
  30          <button onClick={this.handleInc}>Increment Sync</button>
  31        }
  32        {this.props.onIncrementAsync &&
  33          <button onClick={this.handleIncAsync}>Increment Async</button>
  34        }
  35      </div>
  36    );
  37  }
  38}
  39
  40MyComponent.defaultProps = {
  41  children: undefined,
  42  isGreaterThan2: false,
  43  myCount: 0,
  44  onIncrement: undefined,
  45  onIncrementAsync: undefined,
  46};
  47
  48MyComponent.propTypes = {
  49  children: PropTypes.node,
  50  isGreaterThan2: PropTypes.bool,
  51  myCount: PropTypes.number,
  52  onIncrement: PropTypes.func,
  53  onIncrementAsync: PropTypes.func,
  54};

• use your container component in app

  1import React from 'react';
  2import MyContainer from '../containers/MyContainer';
  3
  4export default class App extends React.Component {
  5  constructor(props, context) {
  6    super(props, context);
  7    this.state = {
  8      testValue: 123,
  9    };
  10  }
  11
  12  render() {
  13    return (
  14      <div>
  15        <MyContainer />
  16      </div>
  17    );
  18  }
  19}

License

MIT

Support on Beerpay or Liberapay

Hey dude! Help me out for a couple of :beers:!