How to use react-redux - 10 common examples

it('should give an error when the store is missing', () => {
    // $ExpectError
    ;

    // Also for custom providers
    const CustomProvider: Provider<*, *, *> = createProvider("ikea");

    // $ExpectError
    ;
  });
});

hidden: hidden || false,
    // onPress: onPress || function () { },
  }
  return (
    
  )
}

const mapStateToProps = (state) => {
  return {
    tabBarNav: state.tabBarNav,
    router: state.router,
  }
}

export default connect(
  mapStateToProps,
  // mapDispatchToProps
)(Component)

const mapStateToProps = (state) => {
  return {
    tabBarNav: state.tabBarNav,
    router: state.router,
  }
}

// const mapDispatchToProps = (dispatch) => {
//   return {
//     onPress: (selectedTab) => {
//       dispatch(updateState(selectedTab))
//     }
//   }
// }

export default connect(
  mapStateToProps,
  // mapDispatchToProps
)(Component)

// @flow
import React from "react";
import { Provider, createProvider } from "react-redux";

// $ExpectError
; // missing store

const CustomProvider: Provider<*, *> = createProvider("ikea");

// $ExpectError
; // missing store

// @flow
import React from "react";
import { Provider, createProvider } from "react-redux";

// $ExpectError
; // missing store

const CustomProvider: Provider<*, *> = createProvider("ikea");

// $ExpectError
; // missing store

*/

import React, { createContext, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { createStore, applyMiddleware } from 'redux';
import * as ReactRedux from 'react-redux';
import { mount as baseMount } from 'enzyme';
import thunk from 'redux-thunk';

import * as utils from '../src/utils';
import config from '../src/config';

// Module under test
import connectAsync from '../src/connectAsync';

ReactRedux.ReactReduxContext = createContext(null);

const { ReactReduxContext } = ReactRedux;

const FakeReduxContext = ({ context, children, ...restOfProps }) => (
  
    {cloneElement(children, restOfProps)}
  
);

FakeReduxContext.propTypes = {
  context: PropTypes.shape({}).isRequired,
  children: PropTypes.node.isRequired,
};

const mountWithReduxContext = (context) => (jsx, options) => baseMount(

import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { rxConnect } from "rx-connect";
import { Link } from "react-router";

import { hashCode, toHex } from "../utils";

import { fetchUser } from "../actions/users";
import { fetchPosts } from "../actions/posts";

@connect(undefined, wrapActionCreators({ fetchUser, fetchPosts }))
@rxConnect(props$ => {
    const userId$ = props$.pluck("params", "userId").distinctUntilChanged();

    return userId$.withLatestFrom(props$)
        .switchMap(([userId, { fetchUser, fetchPosts }]) => {
            const user$ = fetchUser(userId)
                .catch(Rx.Observable.of(null));

            const postsByUser$ = fetchPosts({ userId })
                .pluck("data")
                .catch(Rx.Observable.of(null));

            // combineLatest to wait until both user and posts arrived to avoid flickering
            return Rx.Observable
                .combineLatest(user$, postsByUser$)
                .startWith([])

import * as React from "react";
import { Kirby, ParentPlugin } from "@kirby-web3/parent-core";
// @ts-ignore: @types/react-redux doesn't have create*Hook yet
import { Provider, ReactReduxContextValue, createStoreHook, createDispatchHook, createSelectorHook } from "react-redux";

export interface IKirbyContext extends ReactReduxContextValue {
  kirby: Kirby;
}

const kirby = new Kirby();
const startingContext: IKirbyContext = { kirby, store: kirby.redux, storeState: {} };
export const ReduxContext = React.createContext(startingContext);
export const KirbyContext = React.createContext(startingContext);

export const useStore = createStoreHook(KirbyContext);
export const useDispatch = createDispatchHook(KirbyContext);
export const useSelector = createSelectorHook(KirbyContext);

export interface KirbyProviderProps {
  config: any;
  plugins: ParentPlugin[];
}
export const KirbyProvider: React.FunctionComponent = ({ plugins, children, config }) => {
  const [context, _] = React.useState(startingContext);

  React.useMemo(() => {
    kirby.initialize(plugins, config).catch(err => {
      console.log("error initializing kirby!", err);
    });
  }, [plugins, config]);

  return (

import { Kirby, ParentPlugin } from "@kirby-web3/parent-core";
// @ts-ignore: @types/react-redux doesn't have create*Hook yet
import { Provider, ReactReduxContextValue, createStoreHook, createDispatchHook, createSelectorHook } from "react-redux";

export interface IKirbyContext extends ReactReduxContextValue {
  kirby: Kirby;
}

const kirby = new Kirby();
const startingContext: IKirbyContext = { kirby, store: kirby.redux, storeState: {} };
export const ReduxContext = React.createContext(startingContext);
export const KirbyContext = React.createContext(startingContext);

export const useStore = createStoreHook(KirbyContext);
export const useDispatch = createDispatchHook(KirbyContext);
export const useSelector = createSelectorHook(KirbyContext);

export interface KirbyProviderProps {
  config: any;
  plugins: ParentPlugin[];
}
export const KirbyProvider: React.FunctionComponent = ({ plugins, children, config }) => {
  const [context, _] = React.useState(startingContext);

  React.useMemo(() => {
    kirby.initialize(plugins, config).catch(err => {
      console.log("error initializing kirby!", err);
    });
  }, [plugins, config]);

  return (
    <>

const DebugHoverPolygon = (props) => {
  // When the window / viewport resizes, set the width and
  // height of the canvas element.
  const el = useRef(null)

  const enabled = useSelector(
    (state) => state.flags.INFO_BUBBLE_HOVER_POLYGON.value || false
  )
  const hoverPolygon = useSelector(
    (state) => state.infoBubble.hoverPolygon || []
  )

  const handleResize = () => {
    if (!el.current) return

    el.current.width = window.innerWidth
    el.current.height = window.innerHeight
  }

  useEffect(() => {
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  })