Adding a custom redux store to Flex WebChat UI

app.js

import React from 'react';
import * as FlexWebChat from '@twilio/flex-webchat-ui';
import FlextendedState from './FlextendedState';
import NewReducer from './NewReducer';

class App extends React.Component {

  state = {};

  constructor(props) {
    super(props);
    
    FlexWebChat.Manager.create(configuration).then(manager => {
      FlextendedState.addReducer('newReducer', NewReducer);
      manager.store.replaceReducer(FlextendedState.combinedReducers());
      
      // example dispatch
      manager.store.dispatch({
        type: 'SET_NEW_VALUE',
        payload: {
          newValue: true
        }
      });
    )}
  }
}

FlextendedState.js

import {combineReducers} from 'redux';
import { WebchatReducer } from '@twilio/flex-webchat-ui'

const rootReducer = (function () {
  const reducers = {flex: WebchatReducer };
  return {
    addReducer: function (slice, reducer) {
      reducers[slice] = reducer;
    },
    combinedReducers: function () {
      return combineReducers(reducers);
    }
  };
})();

export default rootReducer;

NewReducer.js

const initialState = {
  value: false
};

const NewReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_NEW_VALUE':
      return {
        ...state,
        value: action.payload.newValue
      };
    default:
      return state;
  }
};

export default NewReducer;