How to use the react-redux.createSelectorHook function in react-redux

To help you get started, we’ve selected a few react-redux 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 joincivil / kirby-web3 / packages / parent-react / src / Web3FrameProvider.tsx View on Github external
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 (
    <>
github joincivil / kirby-web3 / packages / child-react / src / KirbyChildProvider.tsx View on Github external
theme?: Theme;
  plugins: ChildPlugin[];
  config?: any;
}

export interface ICoreContext extends ReactReduxContextValue {
  core: ChildCore;
}
const core = new ChildCore();
const startingContext = { core, store: core.redux, storeState: {} };
export const ReduxContext = React.createContext(startingContext);
export const CoreContext = React.createContext(startingContext);

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

export const KirbyChildProvider: React.FC = ({ plugins, theme, children, config }) => {
  const [context, _] = React.useState(startingContext);

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

  return (
    
      
        
          <div>{children}</div>
github edtr-io / edtr-io / packages / public / core / src / store.tsx View on Github external
}

export const useDispatch = createDispatchHook(EditorContext)
export function useScopedDispatch(enforcedScope?: string) {
  const scope = useScope(enforcedScope)
  const dispatch = useDispatch()
  return React.useCallback(scopeDispatch(dispatch, scope), [dispatch, scope])
}

function scopeDispatch(dispatch: (action: Action) =&gt; void, scope: string) {
  return (scopedAction: (scope: string) =&gt; Action) =&gt; {
    dispatch(scopedAction(scope))
  }
}

export const useSelector = createSelectorHook(EditorContext)
export function useScopedSelector(
  scopedSelector: (state: ScopedState) =&gt; T,
  enforcedScope?: string
) {
  const scope = useScope(enforcedScope)
  return useSelector(state =&gt; scopedSelector(getScope(state, scope)))
}

export const useStore = createStoreHook(EditorContext)
export function useScopedStore(enforcedScope?: string) {
  const scope = useScope(enforcedScope)
  const store = useStore()
  return React.useMemo(() =&gt; {
    return {
      dispatch: scopeDispatch(store.dispatch, scope),
      getState: () =&gt; {
github microsoft / BotFramework-WebChat / packages / component / src / WebChatReduxContext.js View on Github external
import { createContext } from 'react';
import { createDispatchHook, createSelectorHook } from 'react-redux';

const context = createContext();

const useDispatch = createDispatchHook(context);
const useSelector = createSelectorHook(context);

context.displayName = 'WebChatReduxContext';

export default context;

export { useDispatch, useSelector };