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

最新推荐文章于 2024-04-12 09:51:57 发布

weixin_30878501

最新推荐文章于 2024-04-12 09:51:57 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mengff/p/9529895.html

本文对比了Redux与Vuex在实际应用中的插件功能，介绍了redux-actions、reselect和redux-react等插件，以及它们如何简化Action、Reducer的编写，并提供依赖变量计算和状态映射。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 }