DRYing Up Redux Actions

Redux is an awesome state management API for React application which in my opinion is a wonderful implementation of the Flux pattern of state management. I’ve been using it a lot lately and it dawned on me that I’ve been massively repeating myself when it comes to Redux actions and I’d like to share how I changed that.

In this tutorial, we’ll be creating a simple TODO application to demonstrate how we can dry up Redux actions. Worthy of note is that I’m assuming you have NodeJS and Yarn already installed on your machine.

Let’s get our React project setup with create-react-app

$ npx create-react-app todo-app
$ cd todo-app
$ npm start

If the command above runs as expected you should have the screenshot below in your browser

create-react-app

Now let’s create our first component that’ll allow us to create todos. We’ll call it AddTodo.react.js.

import React, {Component} from 'react'

class AddTodo extends Component {
  constructor() {
    super()

    this.state = {title: '', description: '', completed: false}
  }

  render() {
    return (
      <div>
        <h2>Add Todo</h2>
        <input value={this.state.title} onChange={(event) => this.setState({title: event.target.value})} placeholder='Title' />
        <input value={this.state.description} onChange={(event) => this.setState({description: event.target.value})} placeholder='Description' />
        <button>Add</button>
      </div>
    )
  }
}

export default AddTodo

Now find App.js and import our shining new component to be added to it’s render method.

By now our TODO app should have auto-refreshed and should now look like

AddTodo component getting rendered

Now let’s get Redux into our application by running the command below:

$ yarn add redux redux-thunk react-redux

$ yarn add redux-logger --dev

We’ll now go ahead to setup our application to make use of Redux for application state management by doing the following:

• Create actionTypes/ directory for our constants
• Create reducers/ directory for our reducers
• Create util/ to hold our asyncActions util functions

Now let’s add asyncUtil.js to the util directory and add the following code to it

Now let’s go ahead to setup our reducers by adding todosReducer to reducers/ directory.

Lets add our rootReducer too.

Let’s go ahead and connect our application to the Redux store in index.js

We’ll now go ahead and connect both AddTodo.react.js and App.js to listen to our Redux store and App.jsshould now look like the following:

import React, {Component} from 'react'
import {connect} from 'react-redux'

import AddTodo from './AddTodo.react'

import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <AddTodo />
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  todos: state.todos
})

export default connect(mapStateToProps)(App)

We’ve successfully setup and added our Redux store but it doesn’t feel like it yet because our app looks exactly as it was when we started right? That’s about to change!!!

Let’s go ahead and add asyncRequestaction dispatcher toAddTodo.react.js props. Now, let’s add the method that’ll add our todo to it and should now look like the following:

Let’s go ahead and display our added todo even though we haven’t added any 😄 in App.js.

At this point if every step has been followed correctly, our app should look like the following:

Todo app ready to display todos

Now go ahead click the Add button and notice that your console spits out our application states. Big Ups to redux-logger for that.

pretty redux-logger

Yay! we are dispatching actions 🎉. Our app should look like the following as a result of the todo add failure.

error message gets displayed

Now let’s add a proper todo item. We should something that looks like the following

todos are live!!!

Conclusion

If we take a close look at asyncUtil.js, we’ll discover that they were made to be as generic as possible and as such they can easily be reused for newer actions if we intend to add more to our TODO app

I hope you’ve learnt something about DRYing up your actions from this. You can find the Github repository link here. Thanks for reading, do clap and share