Slingshot intro in react and redux the TDD way — Part 2

In the first blog, we worked on setting up the project structure and made the presentation layer, now its time to dive into the rest of the application and make it work.

Before we get to start writing code, let’s install some of the packages that we will need to use for this part of the tutorial.

Run the following commands in your terminal

$ npm install --save redux react-redux redux-thunk axios
$ npm install --save-dev moxios redux-mock-store

First, we are installing redux for the core redux functionality and redux-thunk for making the asynchronous calls to the API.

Actions

Actions by definition are payloads of information that send data from your application to the store. From a component, a user clicks on a submit button, this calls a submit action to process the data and in turn pass the processed data to the relevant reducer which will finally save the data to the store.

Following the precedent set in the first blog, we will first write tests then implement the feature to make the tests to pass, so let’s get right to it.

src/actions/TodoActions.test.js

Well, testing an action is straightforward, if it is taking in any payload, it should return a type and the payload which can easily be tested.

src/actions/TodoActions.js

Running the tests at this point should return PASS.

Now that we have the actions, let’s make the reducers like before, we start with the tests. In src/reducers/todoReducers.test.js, paste this code.

Implementing and testing reducers is very easy since they are pure functions, create src/reducers/todoReducers.js, and paste into it all the following code.

It’s common in apps to have more than one reducer which brings the need for them to be combined, for this purpose it’s common to have index.js file that combines all the reducers before they can affect the store.

Now the final missing piece to having working redux app is the store, create the following file, src/store/store.js.

Now we have all the pieces for a react redux app, all we need is to tie them up. In the src/index.js, update to be like this.

Well, now let’s update the presentation to make use of the redux portion that we have added. So as a refresher let’s go through a redux app again. The component will call an action, an action through a middleware (thunk in this case) will make a call to an external API, which will return data and pass it to the relevant reducers. The relevant reducers will update the relevant parts of the store.

First we update the src/components/app/AddTodo.js

and in src/components/app/AddTodo.test.js update this import AddTodo from ‘./AddTodo’; to import { AddTodo } from ‘./AddTodo’;, This is to avoid setting up the store before testing the AddTodo component. Now we update the src/components/app/TodoApp.js.

and in the src/components/app/TodoItem.js update to read from the store as below.

Well this has been long enough, I will break here and the next time we will work on adding a few functionalities, a test server and hosting.