Question

考虑这两种模式以了解减速器的状态：

单个状态对象：

// personReducer.js
const initialState = {
  personInfo: {
    firstName: "",
    lastName: "",
    foo: "",
    bar: "",
    baz: "",
    foo1: "",
    bar1: "",
    bar2: "",
    foo2: "",
    foo3: "",
  }
  // some not-to-mention states
};

多种状态（无person级别）：

// personReducer.js
const initialState = {
  firstName: "", // no person level
  lastName: "",
  foo: "",
  bar: "",
  baz: "",
  foo1: "",
  bar1: "",
  bar2: "",
  foo2: "",
  foo3: ""
};

哪个更好？令我困惑的是：

// Person.jsx - pattern 1
const mapStateToProps = ({ personInfo }) => {
 personInfo
}

// Person.jsx - pattern 2
const mapStateToProps = ({ firstName, lastName }) => {
 firstName,
 lastName
}

// Human.jsx - pattern 1
const mapStateToProps = ({ personInfo }) => {
 personInfo
}

// Human.jsx - pattern 2
const mapStateToProps = ({ foo, bar }) => {
 foo,
 bar
}

假设我们的应用程序中有两个组件Person和Human，它们都将连接到personReducer来检索个人信息。

对于模式1：

在Person组件中，我调度了一个动作来更新firstName内的personInfo，稍后将强制Human重新渲染，对吗？在我们的减速器中是这样的：

case UPDATE_PERSON_INFO: {
 return {
  ...state,
  personInfo: {
    ...state.personInfo,
    firstName: payload.firstName
  }
 }
}

对于模式2：

在Person组件中，我调度了一个操作来更新firstName，由于Human没有映射{{1 }}为其道具，但Human。我对吗？东西喜欢：

firstName

Answer 1

在两种情况下它都会重新渲染，因为在两种模式下，您都将对新的不可变状态对象的引用更新。

如果要防止不必要的组件渲染，则必须在mapStateToProps中使用备注选择器。这是documentation link和GitHub

这些选择器应特定于您的组件。

Redux Reducer-一个状态对象还是多个状态？

1 个答案: