diff --git a/client/src/pages/guide/english/redux/redux-middleware/index.md b/client/src/pages/guide/english/redux/redux-middleware/index.md index 69348facc9..3ee759775e 100644 --- a/client/src/pages/guide/english/redux/redux-middleware/index.md +++ b/client/src/pages/guide/english/redux/redux-middleware/index.md @@ -1,5 +1,5 @@ --- -title: Redux Middleware +title: Redux Middleware --- ## Introduction In this guide it will be presented to the reader the basic concept of Redux Middleware. diff --git a/client/src/pages/guide/english/redux/redux-selectors/index.md b/client/src/pages/guide/english/redux/redux-selectors/index.md index 4056015c06..2b60223110 100644 --- a/client/src/pages/guide/english/redux/redux-selectors/index.md +++ b/client/src/pages/guide/english/redux/redux-selectors/index.md @@ -1,15 +1,142 @@ --- title: Redux Selectors --- + ## Redux Selectors -This is a stub. Help our community expand it. +Redux selectors in their essence are functions that are used to select a subset of data from a Redux state, or in Redux terms, calculate derived data. -This quick style guide will help ensure your pull request gets accepted. +These functions take a state as an argument and make some computations and then return the data that is going to be passed down to any given component. - + +## Why use this pattern + +One reason for using this pattern is to avoid duplicate data. + +Given that we have a list of items in Redux, and we only need to show a filtered list. + +A naive approach with Redux would be to filter the list, store it in Redux and then pass it along to the specific component. + +With this approach we would have two copies of the items and would be easier for the data to get out of sync. + +In case of any operation on the data it would be necessary to make the update twice. + +Another naive approach would be to transform the data directly in the component making use of Redux mapStateToProps like how it's shown in the code bellow. + + +```javascript + // reducer + const listofItems=(state={items:[]},action)=>{ + switch(action.type){ + case "SHOW_ALL": + return action.data.items; + default: + return state; + } + }; +``` +The items stored could be something like: + +```javascript +{ + id:1, + text:"Lorem ipsum dolor sit amet", + complete:false +} +``` +```javascript + import React, { Component } from "react"; + import {connect} from "react-redux"; + + class ItemShow extends Component{ + render(){ + const {incompleteItems}= this.props + return ( +