Redux Middleware (thunks)

[geremora]

I'm trying to make an API call from custom component in my plugin. I'm using the flex-plugin package.

I can't to configure the middleware like thunks with redux.

The code in states/index.js:

import { combineReducers } from 'redux';
import { reduce as CustomTaskListReducer } from './CustomTaskListState';

// Register your redux store under a unique namespace
export const namespace = 'test-uva';

// Combine the reducers
export default combineReducers({
  customTaskList: CustomTaskListReducer
});

The main plugin code is:

init(flex, manager) {
    this.registerReducers(manager);
   flex.TaskInfoPanel.Content.replace(
      <ExtraInfoPanel key="extra-info-component"/>,
      {}
    ); 
  }

  /**
   * Registers the plugin reducers
   *
   * @param manager { Flex.Manager }
   */
  registerReducers(manager) {
    if (!manager.store.addReducer) {
      // eslint: disable-next-line
      console.error(
        `You need FlexUI > 1.9.0 to use built-in redux; you are currently on ${VERSION}`
      );
      return;
    }
    manager.store.addReducer(namespace, reducers);
  }

I see something about it in https://www.twilio.com/docs/flex/ui-migration-guide but I don't know how integrate it with the current code.

[tmayr]

@geremora Did you manage to find a solution for this?

[andrucz]

I've got the following response from support:

Adding middleware is possible from Flex-UI if you are hosting the UI yourself. You can add a wrapper that allows a plugin to add middleware or provide a custom store with the Manager's create method. i.e. Flex.Manager.create(appConfig, CustomMiddlewareStore)

Unless you are hosting the UI, it seems the best option at the moment is not using middlewares at all: https://medium.com/velotio-perspectives/how-to-make-asynchronous-calls-in-redux-without-middlewares-cbf7181020b2

[tmayr]

Thanks for follow up

On Fri, Dec 27, 2019 at 10:46 AM Acácio Andruczewicz < [email protected]> wrote:

I've got the following response from support:

Adding middleware is possible from Flex-UI if you are hosting the UI yourself. You can add a wrapper that allows a plugin to add middleware or provide a custom store with the Manager's create method. i.e. Flex.Manager.create(appConfig, CustomMiddlewareStore)

It seems the best option at the moment is not using middlewares: https://medium.com/velotio-perspectives/how-to-make-asynchronous-calls-in-redux-without-middlewares-cbf7181020b2

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/twilio/flex-plugin-builder/issues/171?email_source=notifications&email_token=AAGJLZVZNX6E65YR7ZXLO4TQ2YBM7A5CNFSM4I2FIIGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHXG23Y#issuecomment-569273711, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGJLZWVE2AAWMD4EBMNYDLQ2YBM7ANCNFSM4I2FIIGA .

[qborreda]

If you are hosting the whole thing yourself it's not a plugin anymore.

Is this the official answer to this at the moment, as of March 2020?

[rnairtwilio]

Hello, we currently don't have a timeline for supporting redux within plugins. I am tagging this as a feature request and will keep this issue posted when we have more clarity.

[qborreda]

It's June 2022 and this issue just popped up again for one of our clients. Can we now use any Redux middleware on a Flex plugin?