Move suggested actions from Redux store to React hooks

[compulim]

Changelog Entry

Changed

• Ported useSuggestedActions to use React hooks as backend instead of Redux store, in PR #5489, by @compulim

Description

In the future, we will deprecate the Redux store and move all state management into native React. This will enable us to work with the next generation of chat adapter which we incubated during our experimental work with Azure Communication Services.

The chat adapter work will make Web Chat cleaner on responsibility and reduce burden on handling different protocols.

This pull request is our first attempt to move suggested actions to React native state management, while keeping backward compatibility through data replication.

Design

Each area of concern will be hosted in their own React context. For instance, suggestedActions and suggestedActionsOriginActivity is now in the new <SuggestedActionsComposer>.

Data flow

Source of truth

The source of truth will be React context. This will help us to deprecate Redux store more easily in some future.

Redux action -> React context

All existing Redux action will be captured by "action sink" and sink into React context. The context component will then use React native state management (useState and useReducer) to save the value.

React context -> Redux action

When the state in React has changed, the new value will be replicated to Redux store via a special WEB_CHAT_INTERNAL/* action.

Data consumption

Our React hooks will start reading from React context, instead of Redux useSelector(). The impact should be minimal as we should have enough tests to convert the surface area of our hooks. However, further minimize risks, we should continue to invest test on hooks.

Data changes from React will be replicated to Redux, web developers can continue to run their apps based on Redux dispatch() and getState().

Performance impact

As data will need to replicate from React to Redux, there will be both space and time penalty.

To minimize performance impact, web developers who do not use the Redux store can opt in and disable the data replication. This feature will be built in future pull requests.

Specific Changes

• Created new redux-store package
• Moved suggestedActions reducer to the new <SuggestedActionsComposer> component
• Redirected useSuggestedActions() hook to use the new value from <SuggestedActionsComposer> component
• Created new react-valibot package to house reactNode and validateProps

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)