Brandibble Redux

A set of actions, reducers, and redux middleware for Brandibble.

Configuration

Middleware

import { brandibbleMiddleware } from 'brandibble-redux';
import { createStore, applyMiddleware, compose } from 'redux';
 
const store = createStore(
  ...
  compose(
    applyMiddleware(...brandibbleMiddleware),
  )
  ...
);

Actions

import { fetchAllergens } from 'brandibble-redux';
 
...
dispatch(fetchAllergens(brandibble));
...

Reducers

import { reducer as brandibbleReducer } from 'brandibble-redux';
import { combineReducers } from 'redux';
 
export default combineReducers({
  ...
  brandibble: brandibbleReducer,
  ...
});

Example

import App from './components/App';
import LoadingState from './components/LoadingState';
import {
  Brandibble,
  setupBrandibbleRedux,
} from 'brandibble-redux';
import { connect } from 'redux';
import { Component } from 'react'; // or 'react-native'
 
const brandibble = new Brandibble({
  // ...config
});
 
const mapStateToProps = state => {
  const { setupBrandibbleRedux } = state.brandibble.status;
 
  return {
    loaded: setupBrandibbleRedux === 'FULFILLED',
  };
};
 
const mapDispatchToProps = dispatch => {
  setup: () => dispatch(setupBrandibbleRedux(brandibble)),
};
 
@connect(mapStateToProps, mapDispatchToProps)
export default class Main extends Component {
 
  componentWillMount() {
    setup();
  }
 
  render() {
    const { loaded } = this.props;
    return loaded ? <LoadingState /> : <App />;
  }
}
 

Working on Brandibble Redux

IMPORTANT: Set an environment variable called BRANDIBBLE_API_KEY with your Brandibble API key before running tests.

git clone https://github.com/sanctuarycomputer/brandibble-redux
cd brandibble-redux
npm install

// Run tests (in chrome) with:
npm test