Decembersoft Inc.

Featured Article

Redux-Thunk vs. Redux-Saga

Redux-Thunk vs. Redux-Saga

Recent Articles

Redux-Thunk vs. Redux-Saga

Redux-Thunk vs. Redux-Saga

By now you've already finished some Redux tutorials and felt like you were ready to test the waters by writing some Redux code of your own.

After some blood, sweat, and tears, you built up a reducer and some actions. You're making some progress! Things are starting to click and you feel like you're finally getting it! Time to hook it up to React.

But then... THUD! You hit the wall: You realize you can't show your component yet because you don't have any data for it!!!

You: Well… okay, Redux, how do I load data?
Redux: Don't care.
You: Got anything to add, React?
React: Not my problem.

Unfortunately for you, ¯\_(ツ)_/¯ is not an answer.

So you read some more blogs… hit up some community resources… but ended up with more questions than answers. As far as you can tell, half the community uses thunks and the other half uses sagas. Well, who is right?

How are thunks different from sagas?

Read more...

Turning Requirements into React/Redux Code

Turning Requirements into React/Redux Code

Working with new technology can be so frustrating!

You've got a simple goal you're trying to achieve -- or at least it should be simple. It was simple in ${otherTechnology}. Why do I feel STUCK? I'm not getting anywhere!!

Even decades of experience count for little when faced with a paradigm shift as shifty as React/Redux.

A question came up on Reactiflux from someone who was having trouble getting from here to there.

I have a container that fetches some posts. I want to show a loading spinner if I'm fetching posts for the first time, otherwise I'd like to show the old data, which is in the store and refetch silently in the background.

I'm going to show you how to translate these requirements into React/Redux code.

Read more...

5 Strategies to Prevent Bugs in a Large Redux Codebase

5 Strategies to Prevent Bugs in a Large Redux Codebase

If debugging is the process of removing software bugs, then programming must be the process of putting them in.

  • Edsger Dijkstra

You've probably heard that the cost of software defects increases the further-along it takes to find them. A defect introduced and resolved during the design phase is relatively cheap. On the other hand, a defect introduced during the requirements-gathering process and not discovered until the implementation phase can be extremely expensive to resolve.

Here are some strategies you can use on a large Redux project to help prevent bugs -- defects in the development phase.

Read more...

Error TS2532 and Optional React Component Props in TypeScript

Error TS2532 and Optional React Component Props in TypeScript

I saw a question on Reactiflux today...

What's the best way to handle default props on a component? Should it ever be typed as optional since React will inject your defaults anyway? I'm running into compiler errors saying the optional values are possibly undefined.

The error being referred to is

error TS2532: Object is possibly 'undefined'.

I'll set up the scenario using a component that displays a fractional number. Suppose you have Props that look like this:

export type Props = {  numerator: number;  denominator?: number; // This is optional};

And you want to be able to specify fractions like this:

<Fraction numerator={ 1 } denominator={ 2 }/> // valid<Fraction numerator={ 3 }/>                   // valid<Fraction denominator={ 5 }/>                 // ERROR

Read more...