DennisDurairaj

import React from "react";
import "./App.css";

function App() {
  const items = [
    { id: 1, value: "London" },
    { id: 2, value: "Paris" },
    { id: 3, value: "Tokyo" },
    { id: 4, value: "Berlin" }
  ];

DennisDurairaj

const selectUsers = state => state.users;

function selectUsernames(state) {
	return state.users.map(user => user.userName);
}

const selectField = state => state.deeply.nested.field;

DennisDurairaj

function Component1() {
  ...
  const name = user.details.personal.name;
  ...
};

function Component2() {
  ...
  const name = user.details.personal.name;
  ...

DennisDurairaj

import React from 'react';
import { useSelector } from 'react-redux';

export const Users = () => {
  const selectUsers = state => state.users;
  const users = useSelector(selectUsers);
  return <div>{users.map(user => <p>user.name</p>)}</div>
};

DennisDurairaj

import React from 'react';
import { useSelector } from 'react-redux';

export const Users = () => {
  const users = useSelector(state => state.users);
  return <div>{users.map(user => <p>user.name</p>)}</div>
};

DennisDurairaj

import React from 'react';
import { useSelector } from 'react-redux';

export const Users = (props) => {
  const users = useSelector((state, ownProps) => state.users[ownProps.id]); //invalid! ownProps does not exist!
  return <div>{users.map(user => <p>user.name</p>)}</div>
};
  
// It's connect() equivalent
import React from 'react';

DennisDurairaj

import React from 'react';
import { useSelector } from 'react-redux';

export const Users = (props) => {
  const users = useSelector(state => state.users[props.id]);
  return <div>{users.map(user => <p>user.name</p>)}</div>
};

DennisDurairaj

const selectData = state => {
  const filteredData = expensiveFiltering(state.data);
  const sortedData = expensiveSorting(filteredData);
  const transformedData = expensiveTransformation(sortedData);
  return transformedData;
};

const data = useSelector(selectData);

DennisDurairaj

import React from 'react';
import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';

const selectUsers = state => state.users;

const selectNumOfUsers = createSelector(
  [selectUsers],
  users => users.length
);

DennisDurairaj

describe("Testing Fetching Weather Forecast", () => { 
  it("Searches weather for valid city", () => { 
    cy.visit("http://localhost:3000"); 
    cy.get("[data-cy='cityName']").type("London"); 
    cy.get("[data-cy='submitCity']").click(); 
    cy.get("[data-cy='weatherDisplay']").contains("London"); 
  }); 
});