Tips on how to work with React, Redux, Reselect and Redux Saga

This article is meant for who just started to adopt ReactJS, Redux, Reselect and Redux Sagas to enhance the way we dealing with daily work with these libraries.

After learning all 4 of them, most developer struggle what to do with these libraries, where do I start when I need to composed a component.

I’ve been struggle with this problem several times before I realize the patterns (I’m not smart). Here is what I’ve been doing for a month:

Jumping around between things like crazy

First I analyze requirement and design and decided to create a react component, then I jump right into it.

I wrote a component, then I realize that I need to connect it with some sort of props (properties) that I’m not completely aware of what they are at the moment.

I created the props, then I realized if I’m doing this, this is a container component (component that take the responsibility of connecting to store for props).

So I have to create another presentation component (rendering ui component).

Then there is some actions need to be dispatched from container component, then I jump into create some actions, but actions need to have predefined constant (I don’t want to explain reason why to define constant here).

A lot of jumping around before you get to a nearly done state. In this moment, I’ve missed some actions and state that should be defined, then I jump back again. This is a painful process so I’ll help some newbie to have a good start.

King of Jumping :)

Tip to avoid being a frog, and going steadily.

First, you need to distinguish between container component and presentation component

# Container Component

Will handle the data connection between store and it’s child.

Will not have it’s own presentation, only contains others presentation component

Goodpoint: Data logic separation for, and let the presentation component has more chance of being reused.

# Presentation Component

Will only render the data passed to it -. can easily be reused elsewhere.

Second, dealing with each of them

# Dealing with container component

1. From requirement, think of all the possible actions & pieces of info needed for the component.
2. Define the input data of the container component.
3. Define the actions name as constant.
4. Create action with associating object data (how to design the data of action is out of discussion).
5. If there is need for calling API, we need to create saga. Otherwise, skip create Saga.
6. Create saga: Create watcher (watch for trigger action condition) and worker for handling the API calls. Create data mutators to morph the response data into our desire shape.
7. If there is no API calling (side effects) then we can go on with Reducers.
8. Reducer: Design initial state of reducer, define logic to handle the data before apply it to the main store.
9. Define selectors to select the necessary data piece or processed pieces of data for the components, this help cache the data for component in case we need it.
10. Pass all the necessary data to container component’s props through connect method of redux, connect, ‘bindActionCreators’, …
11. Render Presentation component inside container component if needed.

# Dealing with presentation component

1. Base on the requirement, define necessary data for rendering this component.
2. Receive the props from parent component or from container component.

I won’t promise this will completely wipe out your pain but at least it helps to reduce the amount of time for jumping around.

Thanks for reading.