Where does your business logic go in a React/Redux app?

**This is a cross-post from my newsletter, Fitness && Functions.

After my last email mentioning Redux middleware, reader David Davis asked me about how this works in a React/Redux application.

I know it’s 2018 and Redux is dead and OMG why aren’t you just using React Context or Apollo and blah blah blah, and while I certainly agree that a lot of what Redux does for you is getting implemented into React itself, I’m thinking some of the people who love to hate Redux may only hate it because they’ve been using it wrong.

It seems many have been sprinkling their business logic in reducers, components, and even actions. But this is a recipe for having hard-to-reason-about code.

Straight from the Redux Docs:

…actions are just plain objects

Reducers are just pure functions

The solution has been there all along, but I don’t think enough of us knew about it or really understood it: Redux Middleware.

[Redux Middleware] provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

This is where your business logic should go!

Over the next few emails, I’ll share some examples of how to get up and running with Redux Middleware, but in the meantime: does this make sense to you? If you’ve used / are using Redux, where does your business logic live?

How to set up a React project without Create React App — Step 2: Initializing the Project and Installing React

Initializing the Project

After you’ve installed Node, the first step is to set up a new project. In your shell, navigate to a directory where you want to create a project. Then, run:

mkdir your-project-name && cd your-project-name

This will create a directory for your project (the first command) and then navigate into that new directory (the second command). If you’re new to the shell, the && operator can be used to run both commands, one after the other. You can chain together the && for as many commands as you wish.

Now that you’re inside your new project directory, you can run npm init to initialize the new project. It will ask you for a few pieces of data such as the version number of your app, a description, etc. You can always change these things later, so don’t sweat it too much. If you’d prefer to keep everything as the default value, simply run npm init -y.

Once this is finished, you’ll have a new file inside your directory: package.json. This file is basically a giant JavaScript object that keeps different pieces of information about your application. It’s used for a lot of things, but the most important things to pay attention to for now are the scripts, dependencies, and devDependencies keys. These are the main objects we’ll be adding to throughout the project.

Initializing the Git Repo

The next thing you’ll do is set up a Git repo for the project. First, create a new file .gitignore file with the following:

Next, run git init in your shell.  This will initialize the Git repository. Then you can run git add . to stage the files you’ve created so far, and git commit -m "initial commit" to make your first commit to the project.

In the next post I’ll outline how you can set up Parcel, the build tool I used for this project, and we’ll do a gut check with React to ensure everything is working.

How to set up a React project without Create React App — Step 1: Installing Node

Note: This series is based on React 16 — if you are using a newer version, your mileage may vary.

I was tasked without setting up a new codebase for a frontend rewrite at work this week. I’ve used Create React App for all my previous React projects, but I didn’t want to default to that — after all, stack decisions I make right now could affect the company for the next 3-5 years. I wanted to make sure I knew and understood all the pieces of this codebase since I’m responsible for it, so I decided to research different options and roll my own React environment.

With the speed at which everything changes in JavaScript-Land™️, I found it tedious to research all the tech I was considering and ensure that the sources I was learning from were not out of date, so I decided to write a post about how I set up a new React project without using Create React App. Everything is still somewhat in flux, so I will update this post if anything changes. Also, I would appreciate any feedback you’d like to share about my decisions!

How to Install NodeJS

Before you can set up a React project, you’ll need Node installed. While you aren’t necessarily creating a Node server here, Node is still used to add third party packages (via npm, which is bundled with Node) to your project as well as run scripts such as a local development server.

To install Node, you can take a couple of different routes.

Option 1: Install it from the NodeJS website. This will install a single version of Node on your machine as well as npm.

Option 2: Use a version manager like NVM or Nodenv. A version manager will allow you to install multiple versions of Node and switch between versions depending on the version required by the project you are working on. This is really helpful to utilize if you work on multiple JavaScript projects (or if you think you may in the future).

I chose to use Nodenv because it’s similar to rbenv, which I’ve used in the past. You can install Nodenv a couple of different ways, but I installed it via Homebrew because I’m on OS X and it’s dead simple.

After installing Nodenv, you can run nodenv install -l to get a list of available versions to install. You can then run nodenv install x.y.z (replacing x.y.z with your desired version number) to install the Node version of your choice. I chose 8.11.3, the version recommended on the NodeJS website at the time of this writing.

Therefore, I ran:

nodenv install 8.11.3

You should now have Node installed. In the next post, you’ll initialize your project and install React.

Worklog 062718

Mostly researching CSS libraries today — I got PostCSS up and running and also learned that Styled Components is bundled with Autoprefixer (or at least does auto-prefixing — not sure if it’s actually Autoprefixer).

I also installed cssnext and it seems to be working, but I’m working on confirming that it’s actually working and that it’s not just working because I have the latest version of Chrome. If anyone has suggestions on how to verify that cssnext is working, let me know!

J

Worklog 062018 – New JavaScript Array Methods

Still lots of general setup-y stuff today, but I did learn a few things.

New JavaScript Array Methods

I was listening to this episode of Syntax on the way to work this morning, and learned some tasty new JS array methods.

I made a CodePen for code examples.

See the Pen JavaScript Arrays – .some(), .includes(), .from() by J.C. Hiatt (@jchiatt) on CodePen.dark

.some()

.some() tests whether at least one element in the array passes the test you provide as a callback function. Note that it immediately returns as soon as it finds the first true value, so it has no idea if there are multiple elements within the array that would pass true. It only cares that there’s at least one.

.includes()

.includes() checks whether the array includes a specific value you pass in, returning true or false.

.from()

.from() creates a new array from an array-like or iterable object. Note that it only creates a shallow copy, so nested values aren’t copied. You can also pass in an optional map function to call on every element of the array as it is added.