We provide some improvements over redux so projects using this package can use redux to it's full.
Because there are places where creating new reducer is too robust and might lead to wrong state mutation there is middleware which can create listeners on redux actions. Anytime new action is triggered it looks trough this set of listeners and calls callbacks.
import { applyMiddleware } from 'redux';
import MiddlewareListener from '@redhat-cloud-services/frontend-components-utilities/MiddlewareListener';
const listenerMiddleware = new MiddlewareListener();
this.store = createStore(
reducers,
initState,
applyMiddleware(listenerMiddleware.getMiddleware())
);
After creating such listener middleware you can simply call addNew
method with type over which you want to listen and callback that is called when such action is called on redux.
addNew params:
- on - type of action to listen to
- callback - function that is called when action is triggered
Callback params:
- data - payload from action
- preventBubble - function to prevent bubbling of such redux event. New event is triggered with type
@@config/action-stopped
and payload as action that was stopped.
const removeListener = listenerMiddleware.addNew({on: 'someType', (event) => event.preventBubble()})
Please clean after yourself by calling function which is returned from listenerMiddleware
.
To enable registering reducers on the fly you may use reducer registry. There are also helper functions to help you improve your work with redux.
To use registry out of the box without some kind of coding we provide simple decorator (you'd have to install coresponding babel plugin and enable decorators).
- First you have to initialize such registry by calling
getRegistry
with initial state and some middlewares (both attributes are optional).
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry';
import promiseMiddleware from 'redux-promise-middleware';
import App from './App';
ReactDOM.render(
<Provider store={getRegistry({}, [promiseMiddleware()]).getStore()}>
<Router basename='/insights/platform/inventory'>
<App />
</Router>
</Provider>,
document.getElementById('root')
);
- Then you can use this decorator anywhere you want and you can access registry by calling
this.registry
.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import registryDecorator from '@redhat-cloud-services/frontend-components-utilities/Registry';
//We'll bind registry to this class
@registryDecorator()
class SomeClass extends Component {
componentDidMount () {
//we'll register new reducer over here
this.getRegistry().register({
someKey: (state, action) => ({...state})
})
}
render () {
return (
<div>
Hello world
</div>
);
}
}
export default connect()(App);
Simply create new instance of reducer registry, you may wish to supply some parameters while creating new store so you can change behaviour of your state.
Parameters:
initState
- default to empty objectmiddlewares
- default to empty arraycomposeEnhancers
- default tocompose
from redux library
import ReducerRegistry from '@redhat-cloud-services/frontend-components-utilities/ReducerRegistry';
import { middlewares } from './middlewareSettings';
const reduxRegistry = new ReducerRegistry(initState, middlewares);
Available methods:
getStore
- to dispatch or to read state of storeregister
- to add multiple reducers
If you don't like switch statements in your reducers you may use object literals, this function will map such object to reducer
const SOME_ACTION = 'some-action';
function reducerFunction(state, action) {
return {
...state,
someProps: action.payload
};
}
const customReducer = applyReducerHash({
[SOME_ACTION]: reducerFunction
})
Later you can assign this customReducer
to change the store by calling register
function.
If application has some actions which needs to be dispatched over multiple stores or they can't be connected via redux-redux
it's convenient to use this function.
It's as easy as calling dispatchActionsToStore with multiple actions (either trough object or array) and store over which you want to dispatch these functions.
import * as actions from './actions';
import store from './singleton-store';
import { dispatchActionsToStore } from '@redhat-cloud-services/frontend-components-utilities/ReducerRegistry';
export default dispatchActionsToStore(actions, store);