React, Reselect and Redux – Dan Parker – Medium

React, Reselect and Redux  #redux #react #reselect #reactjs

  • It gets the state object and returns whatever is.Now for ReselectReselect is a memoized selector function, composed of selectors, that returns something you want in your component’s props.import { createSelector } from ‘reselect’// selectorconst getBar = (state) = reselect functionexport const getBarState = createSelector( [ getBar ], (bar) = bar)I know that syntax looks funny at first, but here’s what happens.
  • Standard set-up, only we have our selector function getBarState(state) rather than passed our state into getBarStategetBarState calls getBar with state as the argument.getBar goes into our state object and returns bar.We use that return value in our Reselect function.Reselect handles the memoization.In Redux, whenever an action is called anywhere in the application, all mounted connected components call their mapStateToProps function.
  • all while being properly memoized.In order to properly memoize a selectorFunction for reusability, it can not be written in the same way…and your mapStateToProps must also change if it is to properly memoize.You need to create a new instance of your selector function every time it is needed for proper memoization on multiple components.To do this, change your selectorFunction to be an anonymous function, that returns a selectorFunctionimport { createSelector } from ‘reselect’// I am a selector, I need no special treatment to be properly // memoized across multiple instances// I have am now passing props so I can find a specific barconst getBar = (state, props) = { const id = const barById =,i) = === id) return barById}// This no longer will work if it is needed in multiple places//export const getBarState = createSelector(// [ getBar ],// (bar) = bar//)// This is proper if it is needed in multiple instancesexport const makeGetBarState = () = createSelector( [ getBar ], (bar) = bar)Now when I call makeGetBarState I get a new instance of a createSelector function.To use this in my component I have to change things there as well.import React from ‘react’import { connect } from ‘react-redux’import { makeGetBarState } from ‘.
  • /selectors’// remember, mapStateToProps can have the component’s// props as the second argument// but now we need to modify this method to allow for a new// instance of our makeGetBarState function, which returns a // memoized selector const makeMapStateToProps = () = { const getBarState = makeGetBarState() const mapStateToProps = (state, props) = { return { bar: getBarState(state, props) } } return mapStateToProps}class Thing extends React.Component { …}export default need to change the standard mapStateToProps to be an anonymous function, that returns a mapStateToProps function…hence makeMapStateToPropsIn the makeMapStateToProps, I create a new instance of my selector function with the const getBarState = makeGetBarState()Now getBarState is a selector function, independent of any other selector function, and it will properly memoize across multiple mounted connected components.Clean it upWe all like short and sweet…right?
  • /selectors’const makeMapStateToProps = () = { const getBarState = makeGetBarState() return (state, props) = getBarState(state, props)}class Thing extends React.Component { …}export default has some cool features.

React is awesome. Redux is awesome, Reselect is awesome. It can be tricky to get all three to play nice together. I will try and explain, in detail, how they work together. If you have no knowledge…
Continue reading “React, Reselect and Redux – Dan Parker – Medium”

Guest Post: Automatically Deploy Pull Requests for Create React Native App and Expo Projects

  • TL;DR;appr builds and deploys pull requests in your create-react-native-app and Expo-based projects, and posts a link and a QR code to your PR, so you can run the app on your device or emulator in seconds!Great teams review their codeI’m sure you’ll agree: Code reviews are a useful tool in a development team’s workflow.
  • You wouldn’t release code to production without having another pair of eyes on it first, would you?Thankfully, GitHub makes code reviews simple.
  • Netlify offers the same functionality for deploying static front end sites.Sadly, this one-click workflow hasn’t been available to mobile developers without setting up complex build and deployment pipelines, and even then, installing an app to be able to test a simple change still takes way too long.Inspired by Expo Sketch, I wanted to see if it would be possible to set up review apps for React Native.Introducing apprAppr is a script that deploys pull requests in your project to Expo, and posts a link and a QR code to your PR.
  • Point your Expo app camera to the QR code and the review app will launch on your device.
  • Switching to your preferred CI should be easy, and PRs to add support are welcome!To make testing your pull requests easy, head to FormidableLabs/appr on GitHub and follow the simple Getting started guide to add appr to your project!

Jani builds React Native apps at Formidable, a Seattle/London-based consultancy and open-source shop. You can follow him on Twitter as @jevakallio. appr builds and deploys pull requests in your…
Continue reading “Guest Post: Automatically Deploy Pull Requests for Create React Native App and Expo Projects”

ReactJS Performance Debugging (aka The Magic of Reselect Selectors)

  • The problem, aside from handling this input incorrectly, was that this piece of code was supposed to only be reached when the search results page is rendered.
  • Redux containers fetch data from the store by connecting to it and transforming the state into props to be passed to the component.
  • By performing a deep comparison of the data, it can determine whether the component really needed to update and log the results to the console.
  • Printing the wasted render events for our page transition ( ReactPerf.printWasted() ) revealed that our entire tree of search bar components was being re-rendered before moving on to the next page.
  • An action was being fired as a part of the page transition which updated the Redux store state, causing all of the containers to re-evaluate all before the first page had been torn down.

After making our journey from Flux to Redux, we were happy with how clean and simple our state management had become so we kept ticking along. Redux
Continue reading “ReactJS Performance Debugging (aka The Magic of Reselect Selectors)”