How to use redux-thunk - 10 common examples

To help you get started, we’ve selected a few redux-thunk examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github davidkpiano / react-redux-form / test / field-component-spec.js View on Github external
+ ' represented by the model', (done) => {
      const initialState = {
        foo: [
          { val: 1 },
          { val: 2 },
          { val: 3 },
        ],
      };

      /* eslint-disable global-require */
      const store = createTestStore(createStore(combineReducers({
        form: formReducer('test', initialState),
        test: modelReducer('test', initialState),
      }), applyMiddleware(require('redux-thunk').default)), done);
      /* eslint-enable */

      const index = 1;
      TestUtils.renderIntoDocument(
        
          <div>
            
              <div>
                <label>
                <input>
              </label></div>
            
            
              <div>
                <label>
                <input></label></div></div>
github terotests / ts2redux / dist / src / frontend / main.js View on Github external
var reducers_1 = require("./models/reducers/");
var TodoList_1 = require("./models/reducers/TodoList");
var UserState_1 = require("./models/reducers/UserState");
var IncModel_1 = require("./models/reducers/IncModel");
var GenericComp_1 = require("./components/GenericComp");
var memberArea_1 = require("./components/memberArea");
var todoList_1 = require("./components/todoList");
var ReduxInc_1 = require("./components/ReduxInc");
var combinedState_1 = require("./components/combinedState");
var todo = require("./models/TodoList");
var WaspModel_1 = require("./models/reducers/WaspModel");
var WaspComponent_1 = require("./components/WaspComponent");
var TetrisComponent_1 = require("./components/TetrisComponent");
var WaspContextComponent_1 = require("./components/WaspContextComponent");
var UIHelperModel_1 = require("./models/reducers/UIHelperModel");
var store = redux_1.createStore(reducers_1.reducers, redux_1.compose(redux_1.applyMiddleware(redux_thunk_1.default), window["__REDUX_DEVTOOLS_EXTENSION__"]
    ? window["__REDUX_DEVTOOLS_EXTENSION__"]()
    : function (f) { return f; }));
// Testing...
var TodoStoreController = /** @class */ (function () {
    function TodoStoreController(store) {
        this._store = store;
    }
    Object.defineProperty(TodoStoreController.prototype, "items", {
        set: function (value) {
            this._store.dispatch({
                type: TodoList_1.TodoListEnums.TodoList_items,
                payload: value
            });
        },
        enumerable: true,
        configurable: true
github wonderunit / storyboarder / src / js / windows / shot-generator / window.js View on Github external
const React = require('react')
const { useRef } = React
const { Provider, connect } = require('react-redux')
const ReactDOM = require('react-dom')
const { ActionCreators } = require('redux-undo')
console.clear() // clear the annoying dev tools warning
const log = require('electron-log')
log.catchErrors()



// TODO use the main Storyboarder store instead of a special one for Shot Generator
//
// configureStore:
const { createStore, applyMiddleware, compose } = require('redux')
const thunkMiddleware = require('redux-thunk').default
const undoable = require('redux-undo').default
const { reducer } = require('../../shared/reducers/shot-generator')

const actionSanitizer = action =&gt; (
  action.type === 'ATTACHMENTS_SUCCESS' &amp;&amp; action.payload ?
  { ...action, payload: { ...action.payload, value: '&lt;<data>&gt;' } } : action
)
const stateSanitizer = state =&gt; state.attachments ? { ...state, attachments: '&lt;&gt;' } : state
const reduxDevtoolsExtensionOptions = {
  actionSanitizer,
  stateSanitizer
}
const composeEnhancers = (
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &amp;&amp;
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(reduxDevtoolsExtensionOptions)
  ) || compose</data>
github sharetribe / ftw-daily / src / store.js View on Github external
export default function configureStore(initialState = {}, sdk = null, analyticsHandlers = []) {
  const middlewares = [thunk.withExtraArgument(sdk), analytics.createMiddleware(analyticsHandlers)];

  // Enable Redux Devtools in client side dev mode.
  const composeEnhancers =
    config.dev && typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      : compose;

  const enhancer = composeEnhancers(applyMiddleware(...middlewares));

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

  return store;
}
github borisding / universsr / src / app / redux / configureStore.js View on Github external
export default function configureStore(preloadedState = {}) {
  const middlewares = [
    // register request actions for dispatch
    // so that it's accessible in respective thunk wrappers
    thunk.withExtraArgument({ ...requestActions }),
    serviceAlert()
  ];

  // check if redux devtools extension compose available
  // apply for development environment only
  const withReduxDevtools =
    isDev &&
    typeof window !== 'undefined' &&
    window.__REDUX_isDevTOOLS_EXTENSION_COMPOSE__;

  // make compose enhancers
  const composeEnhancers = withReduxDevtools
    ? window.__REDUX_isDevTOOLS_EXTENSION_COMPOSE__({
        /* specify extension’s options, if any */
      })
    : compose;
github jsmentor / react-workshops / apps / user-management-app / src / store / configureStore.js View on Github external
export default function configureStore(initialState, helpersConfig) {
  const helpers = createHelpers(helpersConfig);

  const sagaMiddleware = createSagaMiddleware();

  const epicMiddleware = createEpicMiddleware(epics);

  const middlewares = [
    epicMiddleware,
    sagaMiddleware,
    thunk.withExtraArgument(helpers)
    // beforeLoggerMiddleware,
    // afterLoggerMiddleware,
  ];

  let enhancer;

  if (__DEV__) {
    middlewares.push(createLogger());

    // https://github.com/zalmoxisus/redux-devtools-extension#redux-devtools-extension
    let devToolsExtension = f => f;
    if (process.env.BROWSER && window.devToolsExtension) {
      devToolsExtension = window.devToolsExtension();
    }

    enhancer = compose(
github Emurgo / yoroi-mobile / src / helpers / configureStore.js View on Github external
export default () => {
  const logger = {
    log: (message: string, payload: Object) => null,
  }

  const loggerMiddleware = createLogger({
    collapsed: true,
    predicate: (getState, action) => !action.doNotLog,
  })

  const middlewares = [thunk.withExtraArgument({logger})]
  if (process.env.NODE_ENV === 'development') {
    middlewares.push(loggerMiddleware)
  }

  // When not running devtools, use regular compose
  const composeEnhancers =
    (window.__DEV__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose

  const store = createStore(
    rootReducer,
    getInitialState(),
    composeEnhancers(applyMiddleware(...middlewares)),
  )

  if (process.env.NODE_ENV === 'development') {
    logger.log = (message: string, payload: Object) =>
github wellyshen / react-cool-starter / src / redux / store.js View on Github external
export default (initialState: Object = {}) => {
  const middlewares = [
    thunk.withExtraArgument(axios),
  ];

  const enhancers = [
    applyMiddleware(...middlewares),
    __DEV__ && typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ?
      window.devToolsExtension() : f => f,
  ];

  const store: Store = createStore(createReducer(), initialState, compose(...enhancers));

  store.asyncReducers = {}; // Async reducer registry

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers', () => {
      try {
github strues / boldr / src / shared / state / store.js View on Github external
export default function configureStore(history, preloadedState) {
  const reduxRouterMiddleware = routerMiddleware(history);

  const middlewares = [thunk.withExtraArgument(api), reduxRouterMiddleware];

  const enhancers = [
    applyMiddleware(...middlewares),
    IS_DEV &&
      typeof window === 'object' &&
      typeof window.devToolsExtension !== 'undefined'
      ? window.devToolsExtension()
      : f => f,
  ];

  // Creating the store
  const store = createStore(rootReducer, preloadedState, compose(...enhancers));

  /* istanbul ignore next */
  if (module.hot) {
    module.hot.accept('./reducers', () => {
github frictionlessdata / datapackage-ui / src / render.js View on Github external
const React = require('react')
const ReactDOM = require('react-dom')
const thunk = require('redux-thunk').default
const {createStore, applyMiddleware} = require('redux')
const {Provider} = require('react-redux')


// Module API

/**
 * Render component
 *
 * @param {Component} component - it could be one of provided by the library component
 * @param {Object} props - object containing props
 * @param {Element} element - DOM element to render into
 */
function render(Component, props, element) {

  // Prepare component

redux-thunk

Thunk middleware for Redux.

MIT
Latest version published 5 months ago

Package Health Score

93 / 100
Full package analysis