One Source of Truth - Redux + Vue + React

index.js

import { createStore, combineReducers, bindActionCreators} from 'redux'

import Revue from 'revue'
import { Provider, connect } from 'react-redux'


import React from 'react'
import ReactDOM from 'react-dom'

const counter = (state = 0, action) => {
  switch(action.type) {
    case 'increment': return state + 1
    case 'decrement': return state - 1
    default: return state
  }
}

const actions = {
  increment() { return { type: 'increment' } },
  decrement() { return { type: 'decrement' } }
}

// combine reducers
// and create the redux store
const reducer = combineReducers({counter})
const store = createStore(reducer)

class _Counter extends React.Component {
  render() {
    const { increment, decrement, count } = this.props;
    return (
      <div>
        Current counter value: {count}
        <button onClick={_ => increment()}>+</button>
        <button onClick={_ => decrement()}>-</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({ count: state.counter })
const mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)
const Counter =  connect(mapStateToProps, mapDispatchToProps)(_Counter)

class App extends React.Component {
  render() {
    // let counter = store.getState().counter

    return (
      <div>
        <h2>React App</h2>
        <Provider store={store}>
          <Counter />
        </Provider>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('[data-app="react-app"]'))


// create a revue store by binding redux store to Vue
const vueStore = new Revue(Vue, store, actions)

new Vue({
  el: '[data-app="vue-app"]',
  data() {
    return { count: this.$select('counter as count') }
  },
  methods: {
    handleIncrementA() { store.dispatch({type: 'increment'}) },
    handleIncrementB() { vueStore.dispatch(actions.increment()) },
    handleIncrementC() {
      const {increment} = vueStore.actions
      vueStore.dispatch(increment())
    }
  }
})

store.subscribe(_ => console.log(store.getState()))