Accessing Frontend Data with React and Redux

Accessing frontend data with #ReactJS and #Redux:

  • Redux.js only has one store with a single state object that holds all the front end data needed for your app.
  • The data I needed for this view was the array of dog walkers.
  • In order to display that data, I used a component state property called animals, which would represent the animal objects in an array.
  • The state object stored in the store is like any other JavaScript object.
  • Essentially any component that is connected to the state object can access any key-value pair it needs, making working with the single Redux store very convenient.

Over the last few weeks, I have begun to compare the flux flow of React.js and Redux.js’s flow while working on projects. The two are both very powerful and work very well with front end views that users interact with. I learned React first, working in the flux flow, and recently have been developing with React-Redux.…

@ReactiveConf: Accessing frontend data with #ReactJS and #Redux:

Over the last few weeks, I have begun to compare the flux flow of React.js and Redux.js’s flow while working on projects. The two are both very powerful and work very well with front end views that users interact with. I learned React first, working in the flux flow, and recently have been developing with React-Redux.

I wrote about the React.js‘s flux flow in a previous post. If you are not familiar with React, it is a powerful JavaScript library developed by Facebook to render components in views immediately when front end data changes. For reference, below is the React flux flow diagram (also courtesy of Facebook).

The React flux flow works by having multiple stores to handle different front end data used by components (however the developer sees fit). For example, in an app I made that allows users to adopt animals, I had a separate store for the animals (AnimalStore.js) and users, or people, (PersonStore.js).

In my AnimalStore above, I added a getAnimals function that returns the array of animal objects that I stored for my front end. There are other functions for returning other data objects/types related to animals.

One of my views was for a search page that displays animal data that match the user’s search queries. In order to display that data, I used a component state property called animals, which would represent the animal objects in an array. I needed the view to be listening to the AnimalStore and set the animals property in the component state if there were any changes to that array in the AnimalStore. In that event, the getAnimals function declared in the AnimalStore would be invoked (see below).

If you look above, I am also calling other functions (PersonStore.getPeople, PersonStore.getPerson) to fill out the data for other elements in my search component. For each of those needed data types, I wrote one function per data type to extract what I needed to populate those elements.

This is great for customizing any data outputted by your stores that your views would need.

Redux.js only has one store with a single state object that holds all the front end data needed for your app. Instead of multiple stores, reducers are used (with middleware) to handle actions from the views. If you are unfamiliar, here is the Redux.js flow (courtesy of Andre Staltz:

The state object stored in the store is like any other JavaScript object. For example, I worked on an app that allows dog owners to find walkers. My single state object holds the walkers, which is an array of objects, and a single owner, an object with details of the user (owner) who is logged in. It would look like:

Connecting components to the single store in Redux.js allows for every component in your app to have access to any data it needs, which is done through the connect function from React-Redux (an npm package for Node). The connect function takes two arguments, mapStateToProps and mapDispatchToProps, which passes any data from my state object and dispatch functions to be used as props in my component.

For example, one of my views was a page that displays all of the available dog walkers in the app (below). The data I needed for this view was the array of dog walkers. So, using mapStateToProps function, I accessed the array of walkers (value) by the property walkers (key) to pass in the prop walkers into my component.

Essentially any component that is connected to the state object can access any key-value pair it needs, making working with the single Redux store very convenient.

All in all, both React.js and Redux.js are excellent libraries for developing seamless apps that adjust to user actions and data changes. I hope that this post sheds some light on how the components react (pun intended) to frontend data in both libraries.

For more information, please visit dannylim.info.

Accessing Frontend Data with React and Redux