redux的一些插件总结(redux-actions,reselect)

redux本身还是过于简单，实际使用的时候需要配合许多插件。

下面是一些插件与vuex的功能对比

redux-actions <=> vuex的mutation的写法

reselect <=> vuex的getters

redux-react <=> vuex的mapState,mapActions,mapMutations

1.redux-actions

redux-actions是用来简化action和reducer的写法。
redux-actions的常用的API分别是createAction、createActions、handleAction、handleActions、combineActions

简化前后的对比如下：

1.创建Action

//简化前写法

const COUNTER_INCREMENT = 'COUNTER_INCREMENT';

const COUNTER_DECREMENT = 'COUNTER_DECREMENT';

export const incrementCounter = () => ({

  type: COUNTER_INCREMENT,

});

export const decrementCounter = () => ({

  type: COUNTER_DECREMENT,

});

//简化后写法

const COUNTER_INCREMENT = 'COUNTER_INCREMENT';

const COUNTER_DECREMENT = 'COUNTER_DECREMENT';

export const incrementCounter = createAction('COUNTER_INCREMENT');

export const decrementCounter = createAction('COUNTER_DECREMENT');

2.创建Reducer

//简化前写法

export default (state = 0, action) => {

  switch (action.type) {

    case COUNTER_INCREMENT:

      return state + 1;

    case COUNTER_DECREMENT:

      return state - 1;

    default:

      return state;

  }

}

//简化后写法

export default handleActions({

  [incrementCounter](state) {

    return state + 1;

  },

  [decrementCounter](state) {

    return state - 1;

  },

}, 0)

2.reselect

reselect可以用来产生一些依赖变量，产生依赖变量的函数称为selector。
reselect不仅可以用于redux，其他有依赖属性的地方也可以使用。

Selector可以计算衍生的数据,可以让Redux做到存储尽可能少的state
Selector会缓存结果,只有在某个参数发生变化的时候才发生计算过程
Selector是可以组合的,他们可以作为输入,传递到其他的selector

例如：

import { createSelector } from 'reselect'

const shopItemsSelector = state => state.shop.items

const taxPercentSelector = state => state.shop.taxPercent

const subtotalSelector = createSelector(

  shopItemsSelector,

  items => items.reduce((acc, item) => acc + item.value, 0)

)

const taxSelector = createSelector(

  subtotalSelector,

  taxPercentSelector,

  (subtotal, taxPercent) => subtotal * (taxPercent / 100)

)

export const totalSelector = createSelector(

  subtotalSelector,

  taxSelector,

  (subtotal, tax) => ({ total: subtotal + tax })

)

let exampleState = {

  shop: {

    taxPercent: 8,

    items: [

      { name: 'apple', value: 1.20 },

      { name: 'orange', value: 0.95 },

    ]

  }

}

console.log(subtotalSelector(exampleState)) // 2.15

console.log(taxSelector(exampleState))      // 0.172

console.log(totalSelector(exampleState))    // { total: 2.322 }

reselect的详细用法，可以参考https://www.jianshu.com/p/6e38c66366cd

参考：https://majing.io/posts/10000006441202

巴特西

redux的一些插件总结(redux-actions,reselect)

最新文章

热门文章