reselect / immutablejs

immutablejs.md

在 reducer 中，都是返回一个新对象，否则组件是不会更新 ui 的。而返回新对象，可以:

• Object.assign：比较 hack，每次新生成一个对象
• ...state
• immutable.js

reselect.md

主要用来缓存衍生数据的：就是从 store 中的 A、B 要衍生出 C，就可以使用 reselect 来优化性能，避免重复计算。

demo

假设这样的 conatiner 结构:

<div>
   <Count />
   <Posts />
</div>

Count 每 500ms 执行一次自加，不光 Count 的 reducer 会过一遍 mapStateToProps，Posts 的 reducer 也会过一遍。这是必然的，因为 connect 就是这样设计的。

---

这样本没有什么问题，但是，一旦 Posts 的 mapStateToProps 是需要产生衍生数据的，即使 Posts 的 reducer 没有变化，也还是要随着 Count 每 1000ms 计算，浪费性能:

// 每次 Count 的 reducer ，Post 的 reducer 就也要变化，这本来无所谓
// 但是每 500ms 需要计算一次，是很浪费性能的。
const mapStateToProps = state => {
  const postsById = state.postsById
  const usersById = state.usersById
  const postListing = state.postListing

  return {
    posts: postListing.map(id => {
      const post = postsById[id];
      return {...post, user: usersById[post.author]}
    })
  }
}

---

使用 reselect 优化:

// 这样子，就可以做到：只有 postsById、usersById、postListing 其中之一变化时才会重新计算 posts
const getListing = createSelector(
  state => state.postsById,
  state => state.usersById,
  state => state.postListing,
  (posts, users, listing) => listing.map(id => {
    const post = posts[id];
    return {...post, user: users[post.author]}
  })
);

const mapStateToProps = (state) => {
  return {posts: getListing(state)};
};

---

reselect 使用场景：

• 缓存计算结果，节省性能

• 翻译文档
• Immutable.js与React,Redux及reselect的实践
• React Tips - Reselect