Replace Reselect example with a more realistic one

[kopeczech]

---

name: 📝 Documentation Fix
about: Proposing a more realistic example for Reselect usage

What docs page needs to be fixed?

• Section: Writing Memoized Selectors with Reselect
• Page: Deriving Data with Selectors

Original Example

In typical Reselect usage, you write your top-level "input selectors" as plain functions, and use createSelector to create memoized selectors that calculate derived values:

const state = {
  a: {
    first: 5
  },
  b: 10
}

const selectA1 = state => state.a.first
const selectB = state => state.b

const selectResult = createSelector([selectA1, selectB], (a1, b) => {
  console.log('Output selector running')
  return a1 + b
})

const result = selectResult(state)
// Log: "Output selector running"
console.log(result)
// 15

const secondResult = selectResult(state)
// No log output
console.log(secondResult)
// 15

Note that the second time we called selectResult, the "output selector" didn't execute. Because the results of selectA1 and selectB were the same as the first call, selectResult was able to return the memoized result from the first call.

Newly proposed example

In typical Reselect usage, you write your top-level "input selectors" as simple functions that just return values nested somewhere inside the state object. Then, you use createSelector to create memoized selectors that take one or more of these values as input and produce new derived values:

const selectTodos = state => state.todos.items
const selectCurrentUser = state => state.users.currentUser

const selectTodosForCurrentUser = createSelector(
  [selectTodos, selectCurrentUser],
  (todos, currentUser) => {
    console.log('Output selector running')
    return todos.filter(todo => todo.ownerId === currentUser.userId)
  }
)

const todosForCurrentUser1 = selectTodosForCurrentUser(state)
// Log: "Output selector running"

const todosForCurrentUser2 = selectTodosForCurrentUser(state)
// No log output

console.log(todosForCurrentUser1 === todosForCurrentUser2)
// true

Note that the second time we called selectTodosForCurrentUser, the "output selector" didn't execute. Because the results of selectTodos and selectCurrentUser were the same as the first call, selectTodosForCurrentUser was able to return the memoized result from the first call.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[netlify]

✅ Deploy Preview for redux-docs ready!

Name	Link
🔨 Latest commit	eccc5a2
🔍 Latest deploy log	https://app.netlify.com/projects/redux-docs/deploys/68820e328828bf00088fe17e
😎 Deploy Preview	https://deploy-preview-4804--redux-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[markerikson]

Thanks!