ReactJS Duck Pattern

In our previous post we continued our implementation of ReactJS application with Redux. Now in our repository we have lots of folders. It is mainly due to separation of functionality. For example, we have actions and reducers. When we develop a component, we have to walk through different folders. Even, when the application become complex, we will have lot of files, which would eventually become difficult to navigate. Therefore, developers introduced Duck pattern, which we can use when we have a scaling ReactJS application.
In basic terms, Ducks is a proposal for bundling reducers, action types and actions when using Redux.
In ducks pattern, there are some predefined guidelines.

1. Must export default a function called reducer
2. Must export it's action creators as functions
3. Must have action types in the form of npm-module/reducer-name/ACTION_TYPE
4. May export it's action types as upper case, if an external reducer needs to listen to them, or if it is published reusable library

First we will create a constants file in config folder.

 

Then, create index.js file insider ducks/StudentList folder. In this file, we will define action types as constants. Action type value is defined according to the guidelines.

Next we will add actions into this file. Now we can delete our actions folder.

Next, we will add default function for the reducer. Now we can delete reducers folder.

With the above change, we must change our StudentList component.

Then we must modify ConfigStore.js file for student reducer.

Finally, we integrated the ducks pattern which will support us to scale our ReactJS application.