How to use react-navigation-redux-helpers - 10 common examples

To help you get started, we’ve selected a few react-navigation-redux-helpers 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 watanabeyu / react-native-simple-twitter / example / src / store.js View on Github external
import reducers from 'rnstexampleapp/src/reducers';

const logger = store => next => (action) => {
  if (__DEV__) {
    if (action.type.indexOf('Navigation') === -1) {
      console.log(action);
    }
  }
  next(action);
};

/* create store */
const store = createStore(
  combineReducers({ ...reducers }),
  applyMiddleware(
    createReactNavigationReduxMiddleware(
      'root',
      state => state.nav,
    ),
    logger,
  ),
);

export default store;
github tomcastro / react-native-template-goatlab / App / Redux / CreateStore.ts View on Github external
export default (rootReducer: Reducer, rootSaga) => {
  /* ------------- Redux Configuration ------------- */

  const middleware: Middleware[] = []
  const enhancers: StoreEnhancer[] = []

  /* ------------- Navigation Middleware ------------ */
  const navigationMiddleware = createReactNavigationReduxMiddleware(
    (state: StoreState) => state.nav
  )
  middleware.push(navigationMiddleware)

  /* ------------- Analytics Middleware ------------- */
  middleware.push(ScreenTracking)

  /* ------------- Saga Middleware ------------- */

  const sagaMonitor = Config.useReactotron
    ? console.tron.createSagaMonitor()
    : null
  const sagaMiddleware = createSagaMiddleware({ sagaMonitor })
  middleware.push(sagaMiddleware)

  /* ------------- Assemble Middleware ------------- */
github aksonov / react-native-router-flux / examples / redux / src / app.js View on Github external
);

// default nav reducer
const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('home'));
const navReducer = (state = initialState, action) => {
  const nextState = AppNavigator.router.getStateForAction(action, state);
  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
};

const appReducer = combineReducers({
  nav: navReducer,
  reducer,
});

const middleware = createReactNavigationReduxMiddleware('root', state => state.nav);
const ReduxNavigator = reduxifyNavigator(AppNavigator, 'root');
const mapStateToProps = state => ({
  state: state.nav,
});
const ReduxRouter = connect(mapStateToProps)(Router);
const store = createStore(appReducer, applyMiddleware(middleware));

export default class App extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}
github EsecuBit / EsecuBit-react-native-wallet / app / store.js View on Github external
import { createStore, applyMiddleware } from 'redux'
import AppReducer from './reducers/Index'
import {createReactNavigationReduxMiddleware} from 'react-navigation-redux-helpers'
import { composeWithDevTools } from 'redux-devtools-extension';
const middleware = createReactNavigationReduxMiddleware(
  state => state.nav,
);
const store = createStore(AppReducer, composeWithDevTools(
  applyMiddleware(middleware),
  // other store enhancers if any
));

export default store;
github rematch / rematch / plugins / react-navigation / src / redux.ts View on Github external
export default (Routes, initialScreen, sliceState): any => {
	const { router } = Routes
	const initialState = router.getStateForAction(
		router.getActionForPathAndParams(initialScreen)
	)

	// reducer
	const navReducer = (state = initialState, action) => {
		const nextState = router.getStateForAction(action, state)
		// Simply return the original `state` if `nextState` is null or undefined.
		return nextState || state
	}

	// middleware
	const navMiddleware = createReactNavigationReduxMiddleware('root', state =>
		sliceState(state)
	)

	const addListener = createReduxBoundAddListener('root')

	return {
		addListener,
		navMiddleware,
		navReducer,
	}
}
github srtucker22 / chatty / client / src / navigation.js View on Github external
NavigationActions.navigate({ routeName: 'Signin' }),
          state,
        );
      }
      break;
    default:
      nextState = AppNavigator.router.getStateForAction(action, state);
      break;
  }

  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
};

// Note: createReactNavigationReduxMiddleware must be run before createReduxBoundAddListener
export const navigationMiddleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);
const addListener = createReduxBoundAddListener("root");

class AppWithNavigationState extends Component {
  componentWillReceiveProps(nextProps) {
    if (!nextProps.user) {
      if (this.groupSubscription) {
        this.groupSubscription();
      }

      if (this.messagesSubscription) {
        this.messagesSubscription();
      }
github zulip / zulip-mobile / src / boot / middleware.js View on Github external
/* @flow strict-local */
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import createActionBuffer from 'redux-action-buffer';
import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';

import config from '../config';
import { REHYDRATE } from '../actionConstants';
import { getNav } from '../selectors';

const reactNavigationMiddleware = createReactNavigationReduxMiddleware('root', getNav);

const middleware = [reactNavigationMiddleware, createActionBuffer(REHYDRATE), thunk];

if (config.enableReduxLogging) {
  middleware.push(
    createLogger({
      duration: true,
      // See docs/howto/debugging.md.
      // diff: true,
      // predicate: (getState, action) => action.type === 'MESSAGE_FETCH_COMPLETE',
    }),
  );
}

export default middleware;
github pushpanathank / PushBase / app / store / store.js View on Github external
const App = createReduxContainer(AppNavigator);

// Imports: Redux
import rootReducer from '../reducers/index';

const appReducer = combineReducers({
    ...rootReducer,
    nav : navReducer
  })


// Middleware: Redux Thunk (Async/Await)
const middleware = [thunk];

// Redux Helper
const reduxHelper = createReactNavigationReduxMiddleware(
  state => state.nav,
);
middleware.push(reduxHelper);

// Middleware: Redux Logger (For Development)
if (process.env.NODE_ENV !== 'production') {  
  // middleware.push(createLogger());
}

// Middleware: Redux Persist Config
const persistConfig = {
  // Root?
  key: 'root',
  // Storage Method (React Native)
  storage: AsyncStorage,
  // Whitelist (Save Specific Reducers)
github TrustTheBoy / react-native-component-redux / src / redux / util / index.js View on Github external
import { createStore, applyMiddleware } from 'redux';
import { createReactNavigationReduxMiddleware, createReduxBoundAddListener } from 'react-navigation-redux-helpers';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import AppReducer from '../reducers';
//const logger = createLogger();
export const middleware = createReactNavigationReduxMiddleware('root', state => state.nav);
export const addListener = createReduxBoundAddListener('root');
export default createStore(AppReducer, applyMiddleware(thunk, middleware /*createLogger*/));
github imandyie / react-native-airbnb-clone / src / navigators / AppNavigator.js View on Github external
* @Url: https://www.cubui.com
 */

import React from 'react';
import { compose, createStore, applyMiddleware } from 'redux';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';
import { createLogger } from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import { connect } from 'react-redux';
import AppRouteConfigs from './AppRouteConfigs';
import reducer from '../redux/reducers';

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav,
);

const App = reduxifyNavigator(AppRouteConfigs, 'root');
const mapStateToProps = state => ({
  state: state.nav,
});

const AppWithNavigationState = connect(mapStateToProps)(App);

const loggerMiddleware = createLogger({ predicate: () => __DEV__ });

const configureStore = (initialState) => {
  const enhancer = compose(
    applyMiddleware(

react-navigation-redux-helpers

Redux middleware and utils for React Navigation

BSD-2-Clause
Latest version published 5 years ago

Package Health Score

51 / 100
Full package analysis

Popular react-navigation-redux-helpers functions