diff --git a/guide/english/redux/reselect/index.md b/guide/english/redux/reselect/index.md index 4e3161f7bb..1ae12a5dac 100644 --- a/guide/english/redux/reselect/index.md +++ b/guide/english/redux/reselect/index.md @@ -2,14 +2,68 @@ title: Reselect --- ## Reselect -Reselect is a simple selector library for Redux. +Reselect is a simple selector library. Why do we need selectors? Official docs describe it this way: * Selectors can compute derived data, allowing Redux to store the minimal possible state. * Selectors are efficient. A selector is not recomputed unless one of its arguments changes. * Selectors are composable. They can be used as input to other selectors. -It might sound complicated but selectors allow your app to work faster by reducing unnecessary rerendering(s). Normally `mapStateToProps` is called every single time any change in `store` is made. React-redux's "connect" function uses a `mapStateToProps` function argument to specify which store values to pass to the connected react component as props. Until you use `PureComponents` it might cause component being rerendered although it's not required. +It might sound complicated but selectors allow your app to work faster by reducing unnecessary recalculations. Normally, `mapStateToProps` functions are called for every component that needs it. With `reselect`, you can reduce duplicate computations. + +It's important to note that `reselect` is not specific to redux. In fact, it's not even a dependency or peer dependency. `reselect` just provides functions for getting data. + +Here's a trivial example: + +```js +const appState = { + todos: [ + { id: 1, name: 'Learn Redux', done: true }, + { id: 2, name: 'Learn Reselect', done: false }, + ] +} +``` + +Now, I can write selectors that compute different data: + +```js +import { createSelector } from 'reselect' + +const getTodos = state => state.todos // root selector for todo state +const getDoneTodos = createSelector( + // your entire state is passed into the selectors, and is passed as an argument to the first function here: + getTodos, + // then, the return value of the above function gets passed to this next function + todos => todos.filter(todo => todo.done) + // the return value of this selector function will be the array of todos that are finished +) +const getUnfinishedTodos = createSelector(getTodos, todos => todos.filter(todo => !todo.done)) +``` + +And finally, when I want to use these in my components, I can use `createStructuredSelector`: + +```js +import { createStructuredSelector } from 'reselect' +import { connect } from 'react-redux' + +const Comp = ({ doneTodos, unfinishedTodos }) => ( +