-
Drag and Drop Reordering with RTK Query and PHP
Today’s work focused on implementing drag and drop functionality, improving error handling, and refining API endpoints. Key features include a new item creation dialog, item reordering, and enhanced error reporting with stack traces. Backend changes involved refactoring API methods, handling server-side item movement, and using appropriate HTTP status codes. Additionally, the frontend was updated with… Read More
-
Listener Middleware
Streamlined a Redux application by consolidating logic into slice files, removing unused code, and setting up path aliases. Transitioned from Sagas to Listeners for simpler scenarios, focused on local storage interactions and reacting to dispatched actions. Additionally, removed unnecessary dependencies like redux-saga and reselect and created a custom Persistence class for typed local storage access… Read More
-
RTK Query
I transitioned my Redux application to use RTK Query for API calls. This reduced the need for selectors and simplified data management. While RTK Query is powerful, it has limitations like needing many endpoints for a single server and requiring complex TypeScript types for builders. Sagas are still used for specific cases like handling drag-and-drop… Read More
-
Slicing Drag & Drop
Separating Drag & Drop data into its own slice. Read More
-
Transitioning to createSlice
The blog post details transitioning to Redux Toolkit’s createSlice for managing async actions, including fetch operations, drag-and-drop, and abortable processes. It highlights a modular approach using custom action groups to streamline lifecycle management, reduce boilerplate, and maintain flexibility with Redux Saga for handling complex asynchronous workflows. Read More
-
React Glider
Smooth gliding animations for drag-and-drop in a React app. A reusable library (@CodeJamboree/glider) tracks positions and applies styles during drag operations. Keys for data identification and element references are crucial for the library to function. ForwardRef used to access element positions, and useLayoutEffect for post-paint calculations. Quirks with styling and Drag & Drop behavior addressed… Read More
-
Pragmatic Drag & Drop
Exploring Atlassian’s new library, “Pragmatic Drag & Drop”, which offers more flexibility for drag-and-drop functionality across platforms. After initial setup struggles, the library was configured to my needs. The result is smoother drag-and-drop with visual enhancements and easier implementation compared to my custom solution. The library’s modularity and built-in functionalities are commendable. Read More
-
Dragon Drops
Exploring the challenges of implementing drag-and-drop in React using Material UI and React DnD. A custom library to address these challenges was created, providing reusable components and hooks for managing draggable and droppable elements. The library offers flexibility and control over drag-and-drop behavior. Read More