menu
phone

(02) 8006 0506

Simpler Redux Alternative - Dynamo.js

A few days ago we released Dynamo on NPM, and it is on GitHub ready for contributions and forks from the community at this link.

We love state management libraries such as Redux and Flux, but felt that the steep learning curve and significant boileplate to get up and running was too hefty for the majority of our projects. We wanted something simple, with minimal boilerplate, which would just get out of the way and allow us to focus on building awesome apps in React and React Native.

We are going to share a quick tutorial on Dynamo. We are going to create an empty store, and push the words 'Hello World' to it and subsequently render the output within a component. Simple yes, but it demonstrates how Dynamo works, and you can use your imagination to go further.

To get set up, install the package using npm:

npm install --save react-dynamo

Now back in your project, create a file called Store.js and within it, create an empty dynamo store:

import Dynamo from 'react-dynamo';

const initialState = {}

export default Dynamo(initialState);

Every React app has a root component, which is rendered to a point on the DOM using the ReactDOM library. Ours is called index.js and looks a bit like this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

We like to include Dynamo in this root component, and connect it so that the entire store is connected to the app. This is how:

import React from 'react';
import ReactDOM from 'react-dom';
import Dynamo from './Store';
import App from './App';

class Root extends React.Component {
  constructor() { 
      super(); 
    Dynamo.connect(this); 
   }
  render() { return <App />; }
}

ReactDOM.render(
  <Root />,
  document.getElementById('root')
);

All we have really done here, is wrapped our App component in another React component called Root, and within the constructor method we called the Dynamo.connect() function to connect it to the store. We then rendered the Root component to the DOM. Simple!

We have now have access to all of the power of Dynamo within our app. Let's get back to our App component, and see what is in there.

import React, { Component } from 'react';

class App extends Component {

  render() {
    return (
      <div>
        <h1>Nothing to see here</h1>
      </div>
    );
  }
}

export default App;

If we run our project, you will obviously see the text Nothing to see here. We want to use Dynamo to store the string Hello World and output it instead of that text. It's really easy:

import React, { Component } from 'react';
import Dynamo from './Store'

class App extends Component {

  componentDidMount() {
    Dynamo.set({ helloworld: 'Hello World' })
  }
  render() {
    return (
      <div>
        <h1>{Dynamo.get().helloworld}</h1>
      </div>
    );
  }
}

export default App;

Now if we check back out our app in the browser, we should now see the text Hello World. As you can see, Dynamo really relies on three things; connecting a container component to the store using the Dynamo.connect() function, adding to or modifying the store using Dynamo.set() and getting data from the store using Dynamo.get().

Please do check it out, and we look forward to seeing what the community can do with Dynamo.

Joe Logan

Feb 20 2017