Miq experimental plugin + redux

ui
v2v

#1

Hi,

I know we will soon have a v2v-dev mailing list, but wanted to post this question here for others to see too.

I am inspecting the source of the miq-experimental-plugin. It appears that this plugin runs in a separate Rails engine/Rails context and is registering itself in the component registry:

+window.MiqReact.componentRegistry.register({

  • name: ‘xui_plugin’,
  • type: ExperimentalUi,
    +});

After reviewing the new JS Component API proposal here, I would like to know what we think about registering Redux actions and reducers as well (in addition to components).

I noticed we have already added Redux to manageiq-ui-classic and there is now methods to “addReducer” for example, however I do not see any examples of that method being used in the application yet.


Maybe someone can summarize the next steps here to adding page specific Redux reducers and if anyone has any examples. Ideally we can have some solid examples of Angular pages and React pages consuming the Redux API too.

-patrick


#2

I noticed we have already added Redux to manageiq-ui-classic and there is now methods to “addReducer” for example, however I do not see any examples of that method being used in the application yet.

Thats true, we recently added the redux infrastructure, but there is no code using it yet. but you should be able to use it freely, I would only ask you name your actions / reducers with a prefix of your plugin so in the future they would not clash.

I believe the API we have is already usable from within the core / plugins as it stands today.

Maybe someone can summarize the next steps here to adding page specific Redux reducers and if anyone has any examples. Ideally we can have some solid examples of Angular pages and React pages consuming the Redux API too.

Something alongs those lines? https://github.com/ManageIQ/manageiq-ui-classic/blob/master/spec/javascripts/packs/miq-redux-common.spec.js#L58

/cc @VojtechSzocs


#3

@ohadlevy thanks very much for the notes here. Can we maybe tag this topic “v2v” once we have a new tag?

@VojtechSzocs per your email, I look forward to seeing your demonstration of Redux. Can you make sure to tag us on the thread here once it is started? I also will begin looking at redux-observable in comparison with redux-thunk and redux-saga.

There is also some immutability libraries I have been looking into. Maybe anyone has some suggestions on these as well?

One I saw recently that is gaining traction and has a nice API surface for React is Immer.

You can see that here:

I look forward to discussing these topics further.

-patrick


#4

@Fryguy any chance you can add the tag v2v? I still too young in discourse to have permissions :wink: thanks!


#5

Apparently, the feature is called ‘transformation’ in ManageIQ. At least,
that’s the prefix of the database tables:
https://github.com/ManageIQ/manageiq-schema/pull/149/files.


#6

Thanks, TBH I don’t mind either way, just as a way for developers to subscribe to what they care about. both v2v or transformation wfm (but v2v is shorter :wink:


#7

Same for me. It’s just a name :wink:


#8

As Ohad wrote, MIQ Redux API is available but there’s no code using it yet :slight_smile:

You can use ManageIQ.redux.store to access the Redux store with all of its standard methods and ManageIQ.redux.addReducer to add your own reducers. Note that for now, all reducers operate on the whole state object.

For React based UI, you’ll probably have e.g. <FooComponent> and <ConnectedFooComponent> and will want to render the latter through MIQ component API, which is still in progress :hammer_and_wrench:

React support for MIQ component API (will be part of the initial PR) will also include Redux support to auto-wire your component via <Provider store={ManageIQ.redux.store}> so you can focus on the component itself.

For Angular 1.x based UI, since the Redux store object is provided (and implemented) by ng-redux, you can simply inject $ngRedux in your Angular 1.x component and call the $ngRedux.connect function. In other words, $ngRedux === ManageIQ.redux.store. Since Angular 1.x doesn’t have a JSX or similar equivalent, connecting to Redux store needs to happen in the code, by injecting $ngRedux and calling methods on it.

As Ohad suggested, please use meaningful names for your Redux actions. Using a prefix is a good idea, it helps to avoid potential clashes. Ideally, action names should be easy to understand for people who aren’t too familiar with your code, but are familiar with the product and its features.

Sure :slight_smile: once the initial component PR is ready, I’ll write a tech doc on both MIQ component and Redux APIs with lots of examples.

Out of existing Redux middlewares, redux-observable seems to be the most popular. The main idea is to use RxJS to implement a stream of “actions in, actions out”. The unit between “in” and “out” can be an async operation or anything that falls outside the typical, synchronous workflow of Redux.

In MIQ Redux API, we can support multiple types of middlewares, if we want to. We don’t have to lock ourselves into a single one. If someone prefers functions over Rx streams, we can add support for thunks. If there are people who think ES6 generators aren’t that crazy (like me), we can support sagas too :slight_smile: but for now, let’s start simple.