JavaScript redux compose Examples

Example #1

File: configureStore.js Project: JMarcley/pollerbearv2

        }),
        devTools()
      ]
    }
  }else{
    middleware = applyMiddleware(...universalMiddleware);
    allComposeElements = [
      middleware
    ]
  }

  return allComposeElements;

}

const finalCreateStore = compose(...middlewareBuilder())(createStore);

export default function configureStore(initialState) {
  const store = finalCreateStore(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

Example #2

File: index.js Project: gitoni/blogdemo

import {PostContainer} from './components/Post'
import {combineReducers, applyMiddleware, compose, createStore} from 'redux'
import reducer from './reducer'
import {fetchPostList} from './actions'
import {Provider} from 'react-redux'
import {reduxReactRouter, routerStateReducer, ReduxRouter} from 'redux-router'
import {createHistory} from 'history'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'

const loggerMiddleware = createLogger()

const routes = (
	<Route component={App}>
	  <Route path="/" component={PostListContainer} />
	  <Route path="/post/:id" component={PostContainer} />
	</Route>
)

const combinedReducer = combineReducers({
  router: routerStateReducer,
  app: reducer
})

const store = compose(
	applyMiddleware(thunkMiddleware, loggerMiddleware),
	reduxReactRouter({routes, createHistory})
)(createStore)(combinedReducer)

render(<Provider store={store}><ReduxRouter>{routes}</ReduxRouter></Provider>, document.getElementById('root'))

Example #3

File: store.js Project: caojxi/deku_example

import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
import createLogger from 'redux-logger'

import route from './reducers/route'
import todos from './reducers/todos'
import visibilityFilter from './reducers/visibility-filter'

const todoApp = combineReducers({
  route,
  visibilityFilter,
  todos
})

const middlewares = applyMiddleware(createLogger())

const store = createStore(todoApp, {}, compose(
  middlewares,
  window.devToolsExtension ? window.devToolsExtension() : f => f
))

export default store

Example #4

File: configureStore.client.prod.js Project: Workshape/bootstraplist

import { createHistory } from 'history';
import { browserHistory } from 'react-router';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { syncHistory, routeReducer } from 'react-router-redux';
import { persistState } from 'redux-devtools';

import app from '../reducers';

// Grab the state from a global injected into server-generated HTML
const initialState = window.__INITIAL_STATE__;

const rootReducer = combineReducers({
  routing: routeReducer,
  app
});

const reduxRouterMiddleware = syncHistory(browserHistory);
const enhancer = compose(
  applyMiddleware(thunkMiddleware, reduxRouterMiddleware)
);

const store = createStore(rootReducer, initialState, enhancer);

export default store;

Example #5

File: index.js Project: ayumi5/redux-to-do-list

import 'babel-core/polyfill';
import React from 'react';
import App from './containers/App';
import todoApp from './reducers';
import { compose, createStore, applyMiddleware } from 'redux';
import { devTools, persistState } from 'redux-devtools';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

const finalCreateStore = compose(
  applyMiddleware(thunk),
  devTools(),
  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
  createStore
);

const store = finalCreateStore(todoApp);

//let store = createStore(todoApp);

let rootElement = document.getElementById('root');
React.render(
  <Provider store={store}>
    {() => <App />}
  </Provider>,
  rootElement,
  <DebugPanel top right bottom>
    <DevTools store={store} monitor={LogMonitor} />
  </DebugPanel>
);

Example #6

File: AdditionalInformation.js Project: MikkoVirenius/ptv-1.7

            <DigitalAuthorization
              field={field}
              isReadOnly={isReadOnly}
            />
          </div>
        </Tab>
      </Tabs>
    </div>
  )
}
AdditionalInformation.propTypes = {
  field: PropTypes.string,
  index: PropTypes.number,
  activeIndex: PropTypes.number,
  updateUI: PropTypes.func,
  isReadOnly: PropTypes.bool,
  intl: intlShape
}

export default compose(
  injectIntl,
  connect((state, { index }) => ({
    isReadOnly: isConnectionRowReadOnly(index)(state)
  })),
  withState({
    initialState: {
      activeIndex: 0
    }
  })
)(AdditionalInformation)

Example #7

File: AreaTrees.js Project: MikkoVirenius/ptv-1.7

            <AreaTypeHospitalRegionList label={singleSelect ? null : formatMessage(messages.hospitalRegionlabel)} />
          </div>
        </div>
      </div>
    </div>
  )
}

AreaTrees.propTypes = {
  formAreaTypeCodeLower: PropTypes.string.isRequired,
  selectedCount: PropTypes.number,
  singleSelect: PropTypes.bool,
  isReadOnly: PropTypes.bool,
  isCompareMode: PropTypes.bool,
  isLimitedAccessSelected: PropTypes.bool,
  intl: intlShape
}

export default compose(
  injectFormName,
  injectIntl,
  withFormStates,
  connect(
    (state, ownProps) => ({
      formAreaTypeCodeLower: getFormAreaTypeCodeLower(state, ownProps),
      selectedCount: getSelectedAreasCount(state, ownProps),
      isLimitedAccessSelected: getIsAreaInformationTypeAreaTypeSelected(state, ownProps)
    })
  )
)(AreaTrees)

Example #8

File: index.js Project: LumpyChen/Finance-Tools-by-React

/**
 * Created by Lumpychen on 16/5/21.
 */
import { createStore,combineReducers,compose } from 'redux';
import stocks from './stocks';
import showSolution from './showSolution'
import changeRf from './changeRf'
import verify from './verify'

const rootReducer = combineReducers({
    stocks,
    showSolution,
    changeRf,
    verify
})

const store = createStore(rootReducer,compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f
))



export default store;

Example #9

File: store.js Project: Snabel/react-redux-tutorial

import { createStore, applyMiddleware, compose } from 'redux';
import { combineReducers } from 'redux-immutable'
import thunkMiddleware from 'redux-thunk';

import reducerForms from './reducers/forms'
import reducerNews from './reducers/news'
import reducerAuth from './reducers/auth'
import reducerEvents from './reducers/events'

const reducer = combineReducers({
	forms: reducerForms,
	news: reducerNews,
	auth: reducerAuth,
	events: reducerEvents
})

const createStoreWithMiddleware = applyMiddleware(
	compose(
		thunkMiddleware
	)
)(createStore);

export default () => createStoreWithMiddleware(reducer)

Example #10

File: store.js Project: kunaynay/contact-proj-redux

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

Example #11

File: index.js Project: kumar303/addons-frontend

        <Card
          className="Home-SubjectShelf Home-CuratedThemes"
          header={themesHeader}
        >
          <div className="Home-SubjectShelf-text-wrapper">
            <h2 className="Home-SubjectShelf-subheading">{themesHeader}</h2>
          </div>

          {this.renderCuratedThemes()}
        </Card>
      </div>
    );
  }
}

export function mapStateToProps(state) {
  return {
    clientApp: state.api.clientApp,
    collections: state.home.collections,
    resultsLoaded: state.home.resultsLoaded,
    shelves: state.home.shelves,
  };
}

export default compose(
  connect(mapStateToProps),
  translate(),
  withErrorHandler({ name: 'Home' }),
)(HomeBase);

Example #12

File: configureStore.prod.js Project: alekseysoldatenkov/html5-canvas-physics

import { createStore, applyMiddleware, compose }  from 'redux';
import { rootReducer }                            from '../reducers/index';
import reduxStateAndLogThunkMiddleware            from '../middleware/reduxStateAndLogThunkMiddleware';
import sequenceAction                             from 'redux-sequence-action';
import { syncHistory }                            from '../router/react-router-redux-immutable';
import { browserHistory }                         from 'react-router';

const reduxRouterMiddleware = syncHistory(browserHistory);

const enhancer = compose(
  applyMiddleware(sequenceAction, reduxStateAndLogThunkMiddleware, reduxRouterMiddleware)
);

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState, enhancer);

  reduxRouterMiddleware.listenForReplays(store);

  store.browserHistory = browserHistory;

  return store;
};

Example #13

File: store.js Project: mankenavenkatesh/locationscout

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import rootReducer from './reducers'

export const history = createHistory();

const initialState = {};
const enhancers = [];
const middleware = [thunk, routerMiddleware(history)];

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);

export default createStore(rootReducer, initialState, composedEnhancers);

Example #14

File: store.js Project: jbenjaminy/fullstack-game

import { createStore, applyMiddleware, compose }  from 'redux';
var reducers = require('./reducers');
var actions = require('./actions');
var thunk = require('redux-thunk').default;

// add devToolsExtension & devToolsExtension() to use Redux extension
var store = createStore(reducers, compose( applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f ));

module.exports  = store;

Example #15

File: configureStore.dev.js Project: muuqiu/react-book-examples

import ThunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
import DevTools from './DevTools';

const FetchMiddleware = createFetchMiddleware({
  afterFetch({ action, result }) {
    return result.json().then(data => {
      return Promise.resolve({
        action,
        result: data,
      });
    });
  },
});

const finalCreateStore = compose(
  applyMiddleware(ThunkMiddleware, FetchMiddleware, routerMiddleware(browserHistory)),
  DevTools.instrument()
)(createStore);

const reducer = combineReducers({
  ...rootReducer,
  routing: routerReducer,
});

export default function configureStore(initialState) {
  const store = finalCreateStore(reducer, initialState);

  return store;
}

Example #16

File: index.js Project: jackieleighh/streetscape.gl

// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import {combineReducers, createStore, applyMiddleware, compose} from 'redux';
// import {taskMiddleware} from 'react-palm/tasks';
import thunk from 'redux-thunk';
import appReducer from './app';
// import analyticsMiddleware from './analytics';

const initialState = {};
const reducers = {
  app: appReducer
};

const combinedReducers = combineReducers(reducers);

export const middlewares = [
  // taskMiddleware,
  thunk
  // analyticsMiddleware
];

export const enhancers = [applyMiddleware(...middlewares)];

// add redux devtools
// const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default createStore(combinedReducers, initialState, compose(...enhancers));

Example #17

File: logOnly.js Project: Dans-labs/dariah

 return function () {
   return compose(compose.apply(null, arguments), enhancer(config));
 }

Example #18

File: index.js Project: diox/addons-frontend

    );
  }
}

export function mapStateToProps(state: AppState, ownProps: InternalProps) {
  const { reviewId } = ownProps;
  const featuredReview = reviewId
    ? selectReview(state.reviews, reviewId)
    : null;

  return {
    featuredReview,
    loadingReview: reviewId
      ? state.reviews.view[reviewId] &&
        state.reviews.view[reviewId].loadingReview
      : false,
  };
}

export const extractId = (ownProps: InternalProps) => {
  return ownProps.reviewId;
};

const FeaturedAddonReview: React.ComponentType<Props> = compose(
  connect(mapStateToProps),
  translate(),
  withFixedErrorHandler({ fileName: __filename, extractId }),
)(FeaturedAddonReviewBase);

export default FeaturedAddonReview;

Example #19

File: configureStore.js Project: FindunibuddyTeam/site

import rootReducer from './rootReducer';

const middleware = [thunk];

let enhancer;

if (__DEV__ && process.env.BROWSER) {
  const createLogger = require('redux-logger');
  const logger = createLogger({
    collapsed: true,
  });
  middleware.push(logger);

  enhancer = compose(
    applyMiddleware(...middleware),

    // https://github.com/zalmoxisus/redux-devtools-extension#redux-devtools-extension
    window.devToolsExtension ? window.devToolsExtension() : f => f
  );
} else {
  enhancer = applyMiddleware(...middleware);
}

export default function configureStore(initialState) {
  // Note: only Redux >= 3.1.0 supports passing enhancer as third argument.
  // See https://github.com/rackt/redux/releases/tag/v3.1.0
  const store = createStore(rootReducer, initialState, enhancer);

  // Hot reload reducers (requires Webpack or Browserify HMR to be enabled)
  if (__DEV__ && module.hot) {
    module.hot.accept('./rootReducer', () =>
      store.replaceReducer(require('./rootReducer').default)

Example #20

File: index.js Project: coderany/froback

import {Provider} from 'react-redux'
import {createStore, compose, applyMiddleware} from 'redux'
import todoApp from './reducers/index'
import App from './components/App'


const
  broadcastMiddleware = ({getState}) => (next) => (action) => {
    if (!action.fromServer) {
      socket.emit('action', action)
      return p => p
    }
    return next(action)
  },
  finalCreateStore = compose(
    applyMiddleware(broadcastMiddleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )(createStore)

let store = finalCreateStore(todoApp)


module.hot.accept('./reducers/index', () => {
  const nextReducer = require('./reducers/index').default
  store.replaceReducer(nextReducer)
})

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')

Example #21

File: main.js Project: hackur/electron-youtube-player

import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
import { Provider } from "react-redux";
import reduceReducers from "reduce-reducers";

import { playlistReducer, playbackStateReducer } from "./redux/reducers";

import Application from "./components/application";


const rootReducer = reduceReducers(
  playlistReducer,
  playbackStateReducer
);

const finalCreateStore = compose(
  devTools()
)(createStore);

const store = finalCreateStore(rootReducer);

const app = (
  <div>
    <Provider store={store}>
      <Application />
    </Provider>
    <DebugPanel top right bottom>
      <DevTools store={store} monitor={LogMonitor} visibleOnLoad={false} />
    </DebugPanel>
  </div>
);

Example #22

File: store.js Project: mousikosk/Learn-Redux-Starter-Files

import { browserHistory } from 'react-router';

// import the root reducer
import rootReducer from './reducers/index';

import comments from './data/comments';
import posts from './data/posts';

// create an object for the default data
const defaultState = {
  posts,
  comments
};

const enhancers = compose(
	window.devToolsExtension ? window.devToolsExtension() : f => f
);

const store = createStore(rootReducer, defaultState, enhancers);

export const history = syncHistoryWithStore(browserHistory, store);

if(module.hot) {
  module.hot.accept('./reducers/',() => {
    const nextRootReducer = require('./reducers/index').default;
    store.replaceReducer(nextRootReducer);
  });
}

export default store;

Example #23

File: store.js Project: vampxlr/clock-scheduler-canvas-heroku

import { applyMiddleware,compose,createStore} from 'redux'
import rootReducer from './reducers'
import logger from 'redux-logger'
import thunk from 'redux-thunk'


//with out logger
/**/

// with logger
let finalCreateStore;

if(global.environment!='test'){

     finalCreateStore = compose(
        applyMiddleware(thunk)
    )(createStore)

}else{

     finalCreateStore = compose(
        applyMiddleware(thunk,logger())
    )(createStore)

}


export default function configureStore( initialState={clockState:[],pieState:[],selectionState:[]} ){
    return finalCreateStore(rootReducer,initialState)
}

Example #24

File: webpack-entry.js Project: inaturalist/inaturalist

/* global SITE */

const rootReducer = combineReducers( {
  config: configReducer,
  project: projectReducer,
  photoModal: photoModalReducer,
  confirmModal: confirmModalReducer,
  flaggingModal: flaggingModalReducer
} );

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(
      thunkMiddleware
    ),
    // enable Redux DevTools if available
    window.devToolsExtension ? window.devToolsExtension() : applyMiddleware()
  )
);

if ( !_.isEmpty( CURRENT_USER ) ) {
  store.dispatch( setConfig( {
    currentUser: CURRENT_USER
  } ) );
}

if ( !_.isEmpty( SITE ) ) {
  store.dispatch( setConfig( {
    site: SITE
  } ) );

Example #25

File: index.js Project: drojas/react-nested-todo-app

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import {
  createStore,
  combineReducers,
  compose,
  applyMiddleware
} from 'redux';

import Immutable from 'immutable';

const createEnhancedStore = compose(
  window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);

//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
let injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

const initialTodosState = Immutable.fromJS([
  {title: 'hola', todos: []}
]);

const todoReducer = (state = initialTodosState, action) => {
  switch (action.type) {
  case 'TODO_ADD':

Example #26

File: index.js Project: aviarypl/mozilla-l10n-addons-frontend

                <span className="visually-hidden">{buttonText}</span>
              </div>
            </div>
          </CSSTransition>
        ) : (
          <CSSTransition key="button" {...transitionProps}>
            <Button {...buttonProps}>
              <Icon name={this.getIconName()} />
              {buttonText}
            </Button>
          </CSSTransition>
        )}
      </TransitionGroup>
    );
  }
}

export function mapStateToProps(state: AppState) {
  return {
    userAgentInfo: state.api.userAgentInfo,
  };
}

const AMInstallButton: React.ComponentType<Props> = compose(
  withRouter,
  connect(mapStateToProps),
  translate(),
)(AMInstallButtonBase);

export default AMInstallButton;

Example #27

File: index.js Project: SBUtltmedia/tlt-calendar

}

const reducer = combineReducers({
  ...reducers
});

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={SHOW_DEV_TOOLS}>
    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
  </DockMonitor>
);

const store = createStore(
  reducer, compose(
    applyMiddleware(thunk),
    //window.devToolsExtension ? window.devToolsExtension() : f => f,
    DevTools.instrument()
  )
);

if (module.hot) {
  // Enable Webpack hot module replacement for reducers
  module.hot.accept('../reducers', () => {
    const nextReducer = require('../reducers');
    store.replaceReducer(nextReducer);
  });
}

render((
  <Provider store={store}>
    <div>

Example #28

File: lifecycle-connect.js Project: JamieDixon/react-lifecycle-component

	return (component) => {
		const connected = compose(connect(mapStateToProps, mapDispatchToProps, mergeProps), applyLifecycle);
		return connected(component);
	};

Example #29

File: store.js Project: PrivyGambit/ChatApp

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { routerReducer, syncHistoryWithStore } from 'react-router-redux'

import * as reducers from '../redux/modules'

const store = createStore(
    combineReducers({...reducers, routing: routerReducer}),
    compose(
        applyMiddleware(thunk),
        process.env.NODE_ENV !== "production" ? window.devToolsExtension() : (f) => f
    )
)

module.exports = { store }

Example #30

File: app.js Project: jnmandal/minimalist-redux-boilerplate

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { compose, createStore } from 'redux'
import reducers from './reducers'
import App from './components/App'
// styles
import './styles/styles.scss'
// setup
let devtools = window.devToolsExtension ? window.devToolsExtension() : f => f
let store = compose(devtools)(createStore)(reducers)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)