CODEWITHSUNDEEP
reactjsisomorphic-javascriptwalmart-electrode
MonkeyBonkey
MonkeyBonkey

Reputation: 47881

Is there any way to use the electrode confippet config variables client-side?

Using the electrode-confippet library, https://github.com/electrode-io/electrode-confippet - is there any way I can use the config settings client-side in the react component?

I am currently creating a config store and passing it from the server index file, but is there a better way?

//index-view.js
import { config } from 'electrode-confippet';
const auth0Config = config.$('settings.auth0');

function createReduxStore(req, match) { // eslint-disable-line
  const initialState = {
    user: null,
    checkBox: { checked: false },
    number: { value: 999 },
    config: { auth: auth0Config },
  };

  const store = createStore(rootReducer, initialState);
  return Promise.resolve(store);
}

Upvotes: 0

Views: 404

Answers (1)

Jakob Jingleheimer
Jakob Jingleheimer

Reputation: 31580

Yes! We're doing it currently:

// src/server/views/index-view.js
// …
module.exports = (req) => {
    const app = (req.server && req.server.app) || req.app;

    if (!app.routesEngine) {
        app.routesEngine = new ReduxRouterEngine({
            routes,
            createReduxStore,
            stringifyPreloadedState
        });
    }

    return app.routesEngine.render(req);
};

This will supply it on every request to Express.

If you need to set up config params that your app needs during initialisation, also create the store in express-server.js (and re-create it in index-view.js to avoid cross-connection contamination).

// express-server.js
// …
const loadConfigs = (userConfig) => {
    if (_.get(userConfig, 'plugins.electrodeStaticPaths.enable')) {
        // eslint-disable-next-line no-param-reassign
        userConfig.plugins.electrodeStaticPaths.enable = false;
    }

    return Confippet.util.merge(Confippet.config, userConfig);
};

// fetch appContext FIRST because components may need it to load, eg: language
const createReduxStore = (config) => store.dispatch({
        type: 'ADD_INITIAL_STATE',
        payload: { appContext: config.$('storeConfig') },
    })
    // eslint-disable-next-line no-console
    .catch(error => console.error('DISPATCH ERROR:', error))
    // return the now-hydrated store
    .then(() => store);

module.exports = function electrodeServer(userConfig, callback) {
    const promise = Promise.resolve(userConfig)
        .then(loadConfigs)
        .then(createReduxStore)
        // …

    return callback ? promise.nodeify(callback) : promise;
};

Then Electrode will make it available as something like window.__PRELOADED__

Upvotes: 1

Related Questions