Last weekend, I saw the source code of Vuex. I was inspired. Why are all Vuex. So Dongtong wrote a plug-in one afternoon to help Vue use Redux

Gayhub Url

Vue-with-Redux

This is a plug-in used to help Vue use Redux to manage state. Redux is a very popular state management tool. Vue with Redux provides you with a way to use Redux in Vue environment. This brings a different development experience.

start

First you need to install Vue with Redux with the following command

  npm install -save vue-with-redux
 Copy code

Run Demo

  git clone https://github.com/ryouaki/vue-with-redux.git
  npm install
  npm run serve
//Copy code

Usage

You need to modify your entry file as follows:

  // It may be your entry.js file
  ... // Here are the other packages you introduced
  import VuexRedux from 'vue-with-redux';
  import { makeReduxStore } from 'vue-with-redux';
  import reduces from 'YOUR-REDUCERS';
  import middlewares from 'REDUX-MIDDLEWARES';

  Vue.use(VuexRedux);

  let store = makeReduxStore(reduces, [middlewares]);

  new Vue({
    store,
    render: h => h(App)
  }).$mount('#app')
//Copy code

Here is an actionCreate function:

  export function test() {
    return {
      type: 'TEST'
    }
  }

  export function asyncTest() {
    return (dispatch, getState) => {
      setTimeout( () => {
        console.log('New:', getState());
        dispatch({type: 'TEST'});
        console.log('Old', getState());
      }, 100);
    }
  }
//Copy code

Note: you don't need to use Redux thunk because Vue with Redux already provides support for asynchronous processing

This is an example of reducer:

  function reduce (state = { count: 0 }, action) {
    switch(action.type) {
      case 'TEST':
        state.count++;
        return state;
      default:
        return state;
    }
  }

  export default {
    reduce
  };
//Copy code

Examples of Vue components:

  <template>
    <div>
      <button @click="clickHandler1">Action Object</button>
      <button @click="clickHandler2">Sync Action</button>
      <button @click="clickHandler3">Async Action</button>
      <p>{{reduce.count}}</p>
    </div>
  </template>

  <script>
  import { test, asyncTest } from './../actions';

  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    // You must define the status of your subscription Redux in advance here. Otherwise, the compilation template will report an error.
    data() {
      return {
        reduce: {}
      }
    },
    methods: {
      clickHandler1() {
        this.dispatch({type: 'TEST'});
      },
      clickHandler2() {
        this.dispatch(test());
      },
      clickHandler3() {
        this.dispatch(asyncTest());
      },
      // You must implement a mapReduxState function to tell Vue with redux which states in redux you need to subscribe to
      //  The [state] parameter is the root of the redux state tree.
      mapReduxState(state) { 
        return {
          reduce: state.reduce
        }
      },
    }
  }
  </script>
//Copy code

By Yahui Liang (ryou)
Link: https://juejin.im/post/5b03870d518825426b2783d3
Source: Nuggets
The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source.