[D&D] Add state management for the Drag & Drop plugin

[ashwin-pc]

Add state management to the drag and drop plugin

[ashwin-pc]

Options being considered:

• StateContainers
• Redux (RTK)

Recommendation

Redux with React Redux and Redux toolkit.

Why not State containers?

State containers are a custom solution for state management within a plugin for OpenSearch Dashboards meant to closely mimic Redux without the boiler plate. Based on the State container docs, State containers are Redux-store-like objects meant to help you manage state in your services or apps. While this was useful when it was initially created, Redux has come a long way to address some of those shortfalls while also giving us access to all its features and ecosystem that it warrants another look.

All of the reasons mentioned in the Sate container doc are no longer true about redux and can be easily achieved by Redux Toolkit e.g. Strongly typed, less boilerplate code, ability to use with and without react. It also lacks some of the benefits that redux provides such as time travel, extensions, developer tools and documentation.

Why Redux

Redux is the oldest and most popular state management tool for react applications. It can be used without it too and comes with a very opinionated style and large ecosystem of tools and features. While it is not recommended for many simple use-cases for state management, more complex applications and larger code bases with large amounts of application state can definitely benefit from it. State containers were after all modeled to mimic redux after all. Like any tool however redux does have some trade offs:

• Application state should be described using plain JS objects and arrays
• There must be a single Redux store that holds the application state
• The store can only be updated by describing events that happen as plain "action" objects, and "dispatching" them to the store for processing
• The logic for updating the store state must be written as "reducer" functions, which look at the current state and the action object to decide what the resulting new state should be. Reducer functions must be "pure", with no side effects, and must calculate the new state using immutable updates.
• More boiler plate code

Some of these tradeoff are acceptable to our use-case but most of them are no longer an issue when we use it in combination with redux toolkit.

Redux with React Redux and Redux Toolkit offers all the benefits that come with State containers, while also providing us with additional features such as Slices, Time travel, extensions, Immutability. It also comes with a lot more tooling and documentation that makes working with it a lot easier.