In the course of developing a web service, we developed a code manager that streamlines work involving React-Redux.
The considerable inefficiency created by routine React-Redux tasks
Because redux involves a great deal of boilerplate and similar repetitive code, it is a tool whose overall structure is difficult to grasp and in which bugs caused by human error tend to occur.
In addition, react-redux poses a problem in deciding where to place react components that are closely tied to the modules created with redux. If react and redux code are placed separately, refactoring such as renaming modules becomes difficult, while building mirrored directory structures takes effort and increases the risk of human error. If they are placed in the same directory, extra work such as creating subdirectories by role is still required.
Because these problems arise for every feature, the overall result was considerable inefficiency.
Centralized code structuring and management
To solve the problems described above, we developed a manager that centrally handles code structuring and management.
Redux management
It structures redux code and manages it through an easy-to-read interface. For each module, it creates a slice for aggregating information, a slice for actions, and a React component for the view.
Fast code access
Each item is equipped with functions to open its code file in the default editor, copy the import code, and copy the dispatch code.
React page management and parts management
It manages pages, whose management is otherwise inefficient because similar code recurs frequently.
It structures and manages the large number of React components required as reusable parts.
Styled Component Creator
It creates styled components instantly. It eliminates the inefficiency of dealing with boilerplate that differs only slightly and of searching for CSS properties.
