Slingshot intro to React and Redux the TDD way — Part 1

Redux adds a little complexity to reduce the overall complexity of the app as it grows.

We will create a simple app using react, redux and ES6.

Since its release, React has been on a steady growth and it is now one of the most embraced front-end libraries. React describers itself as the ‘V’ in the MVC, and it is great at this one thing. In this tutorial I’m assuming that you can create simple react app and are ready to get into the complexities of redux.

In a simple react app, all the components manage their memory called state. While this is great, it’s hard to keep track of the states as the project continues to grow. This quickly escalates to a pure nightmare when you need to share data between the components. As a solution to this problem, Facebook proposed Flux architecture.

Redux

Redux is the defacto implementation of the flux architecture. We are going to make a simple app with react and redux in TDD way. Before getting started, here are some of the basic concepts of redux. The whole app is split it into the following parts: Component, Action, Reducer and a Store.

• Components: These can be split into two, Containers and Components. Components contain the material for presentation, the JSX. while the container will mostly have less JSX and will be connected to the store.
• Actions: This can be described as a payload of information sent from the application to the store.
• Reducers: This is the only way of manipulating the store.
• Store: The store is the object representation of the app state.

A user will trigger an event from the component, which will trigger an action. The action will trigger one or more reducers which will intern update the store.

Create the app

Now that we have the basic flow of redux app, let’s get started.

To create the project we will use facebook’s create-react-app tool. To install it globally, run the command below

npm install -g create-react-app

To create a project with the name simple-app run the command

create-react-app simple-app

Now cd simple-app to move into the project folder. create-react-app creates a project with the following structure

simple-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── registerServiceWorker.js

As mentioned before, we are going to use the TDD approach to develop this app. This means that we will be writing tests first, make sure that the tests are failing. Then implement the feature, then make sure that the test is passing, then repeat the cycle.

Tests Setup

So the first thing to do is to set up the testing environment, lucky for us is done by the create-react-app to run tests, use this command npm test

result that comes when you run `npm test`

this is a result of testing code in App.test.js

While this is sufficient for now, we will need more libraries to make it easy to write tests. For this, we will use enzyme, run the command below to install enzyme and its dependencies.

npm install — save-dev enzyme react-test-renderer enzyme-adapter-react-16

Now add src/setupTests.js and src/tempPolyfills.js files and copy the following lines.

Now we can rewrite the above test as below and run with npm test .

This test uses shallow(), which renders the App component and goes no deeper. If there are other components in App they will not be rendered. This type of test is useful when you want to do tests in isolation. If you need a full render of a component and its children you can use mount().

First component

We are going to make the todo app, its layout will be something close to this

Todo app layout

From the above layout we will need two components and one container, so let’s create them. So first we write the tests.

src/components/Navbar.test.js

// src/components/TodoItems.test.js

// src/components/TodoApp.test.js

// src/components/AddTodo.test.js

Well, now that we have the test we implement the code.

// src/common/Navbar.js

// src/components/AddTodo.js

// src/components/TodoApp.js

// src/components/TodoItems.js

Now run the tests all the five tests should pass.

Now we have completed the presentation layer of the app, Next time we will move to the action, reducers and store to wrap up the todo app and host it in googles Firebase. Here is a link to thegithub repo.