代码之家 › 专栏 › 技术社区 › Akshay Vijay Jain

按照redux-no-mutation标准进行重构是否合适?

react-redux redux ecmascript-6

0

Akshay Vijay Jain · 技术社区 · 7 年前

我理解用户可能会对我的问题投反对票,但我需要确定,而且我没有办法确定,除非我问React Redux有经验的人。请回答,不要投反对票。
问题是是否可以重构下面所示的代码,否则可能会出现一些问题

const mapStateToProps = (state) => {
  const { 
      router,
      classDetail,
      categories,
      instructorFreeSlots
     } = state;

  return {
    router,
    classDetail,
    categories,
    instructorFreeSlots
  };
};


const mapStateToProps = (state) => ({
  state.router,
  state.classDetail,
  state.categories,
  state.instructorFreeSlots,
})

通用代码是:

const mapDispatchToProps = dispatch => ({
  dispatch,
});

export default connect(mapStateToProps, mapDispatchToProps)(ClassDetailContainer);

1 回复 | 直到 7 年前

1

2

Jordan Enev 7 年前

首先,重构的改进与任何数据突变都没有关系。让我们回顾一下:

1。 `mapStateToProps` 重构:

你的 地图状态图 有关的重构 Object Initializer and Shorthand property naming 它在语法上是不正确的。它可以是:

const mapStateToProps = ({ router, classDetail, categories, instructorFreeSlots }) => ({ 
  router, classDetail, categories, instructorFreeSlots
})

你的第一个版本也很好。这里我们主要讨论句法上的糖分,所以我们不必担心太多。选择你的惯例并坚持下去。

2。 `mapDispatchToProps` 重构:

根据您的用例(其中没有添加任何内容),您可以省略传递 地图调度Oprops 功能到 connect 函数和 dispatch 函数将自动传递给 ClassDetailContainer :

export default connect(mapStateToProps)(ClassDetailContainer)

记住,如果你摔倒了 地图调度Oprops 到 连接 , 地图调度Oprops 可以是对象或函数。

请核对一下 mapDispatchToProps official documentation 为了更好地理解它是如何工作的,但主要的想法是:

如果传递对象 ,其中的每个函数都被假定为Redux动作创建者。具有相同函数名但具有每个动作创建者都会接到一个调度电话,这样他们就可以直接调用,将合并到组件的props中。

如果传递函数 ,它将作为第一个参数提供调度。返回以某种方式使用的对象取决于您。以您自己的方式调度以绑定动作创建者。(提示:您可以使用 redux中的bindActionCreators()助手。)

按照redux-no-mutation标准进行重构是否合适?

1。 mapStateToProps 重构:

2。 mapDispatchToProps 重构:

1。 `mapStateToProps` 重构:

2。 `mapDispatchToProps` 重构: