Technology

Eleni Chappen

When to Put Data in Redux

May. 17, 2018

Lots of internet ink has been spilled over when to keep data in an application state management system (like Redux) versus in a React component's internal state. While I've mentioned benefits to Redux on this blog before, it's important to understand the tradeoffs.

Keeping state in components has pros and cons:

Pro: your data is cleared when the component unmounts!

Con: your data is cleared when the component unmounts.

Likewise, keeping data in app state has pros and cons:

Pro: your data persists between components!

Con: your data persists between components.

Personally, I err on the side of keeping data out of app state. If I'm creating a new component and I'm unsure where to store my data, I'll use internal state, then port to Redux when it becomes necessary.

It's helpful to conceive of your app state as a collection of global variables. Normally, global variables are to be avoided. You wouldn't add global variables willy-nilly in a Rails or Python app. Have the same precaution when adding globals client-side.

Like any other global variable, when you make the decision to move your data into the global app state, it is now up to you to manage it. For instance, you'll probably need to clear your app state when a user logs out. When a user exits a multi-step form, you may need to clear any data that user entered.

Constructing your React container components thoughtfully can help you avoid manually managing state like this. With multi-step forms, I typically create a wrapper component that's responsible for rendering each step of the form, keeping all user-entered data in its own state. From this container, I can pass any of its state and functionality down to each step as props. It's a simple solution, but an often overlooked one, especially when Redux is already in your app and you see other components using it.

When an app uses Redux, it's impossible to prevent future maintainers from simply adding everything to app state. You can mitigate this by stressing in your documentation how keeping state in Redux can be dangerous. You can also practice predictable state patterns in your own components (like the form wrapper), setting good examples for future developers. But ultimately it's a hard thing to enforce, and this should be considered when deciding to add Redux to your application.

Eleni Chappen

What People Are Reading

Technology

11/20/17

Cross-Platform mobile development is cost-effective and faster to launch

Two years ago, if a person approached us for mobile app development, the first question would be what platform to launch on first - iOS or Android. It was almost double the cost to deploy on both and double the maintenance.

Fast forward to today, we can deploy on iOS and Android quicker before, at the same time, and with the expected native quality.

So what has changed? Technology has gotten a lot better. We particularly use React Native, an open source framework from Facebook, that allows developers to develop in a common language, Javascript, and deploy on both iOS and Android.

And it is native! Previous technologies for cross platform mobile apps would create a wrapper of a web view. Think of the older experience as using the browser on your phone for a site with a few more bells and whistles. It was close but the difference is noticeable when switching to native applications, from scrolling to the overall experience.

How does this impact everything now?

Cost is no longer double for both platforms. It can even cost less due to wide spread community support developing open source libraries.

Maintenance is a lot easier. A majority of the issues can be fixed in one code base and of the same language.

Recruitment and team knowledge is easier. Your team only need to know one language and most developers know Javascript. iOS is written in Objective C or Swift and Android is written in Java.

Reusable code for desktop web views. With React Native, we are able to share over 50% of the code with the web view, saving all of the above even more.

Stay tuned, as I’ll be going more into the technologies and other benefits.

News

10/18/17

ChangeMaker Launches!

In a world where marches and protests are making weekly headlines, people are always looking for the next cause to get behind.

But what do you do when a cause or issue you’re passionate about needs more awareness and support? How do you find people to come together? How do you organize people, activities, events, and whatever else you might need to do? And if you do find people, how do you manage all the different moving parts?

And, well, what does that have to do with us at 20spokes?

Meet ChangeMaker -- a project we recently completed and launched.

Similar to sites like Kickstarter or Indiegogo, ChangeMaker allows organizations to add a project and find fellow activists to donate to or join the cause as a volunteer. The interface provides organizations the ability to detail an issue or problem, outline a solution, and how donors or volunteers can help. When people join the project as a volunteer, they can specify their particular skillset in fields such as marketing, design, legal, or data so project managers can delegate tasks to the right people.

With funding from donations, users can work on projects for their cause by using the free website. While most project management tools have some sort of fancy, pay-to-use features, ChangeMaker is completely free to use because it is donor funded and donor maintained.

We branded, designed, and coded the ChangeMaker platform in a Rails environment. We also integrated Stripe Connect, which enables organizations to receive those donations they need to power their projects.

Putting all this together sounds like it would take a good chunk of time, right? But we kicked off this project on August 8 and launched the website this week. A little more than two months. Not too shabby, eh? Just in time for the Newfounders Conference. ChangeMaker will have a big presence at the conference with donors ready to help out organizations that have ready-to-pitch projects for its demo night. Nothing is too small or too large for ChangeMaker to help its users and organizations tackle.

Give ChangeMaker a whirl at changemaker.newfounders.us.