redux-bundler-react

Bindings for redux-bundler to React

install

npm install redux-bundler-react

example / docs

Similar to react-redux this has two exports, Provider and connect.

Provider puts the store into the context so that connected components can get access to it:

import { connect, Provider } from 'redux-bundler-react'
import getStore from './bundles'
import AppRoot from './app-root'

export default () => (
  <Provider store={getStore()}>
    <AppRoot />
  </Provider>
)

connect works a bit differently for redux-bundler than you may be used to. You pass it the string names of the selectors and action creators you want to grab from the store. The last argument should always be the component itself.

import { connect } from 'redux-bundler-react'

const MyComponent = ({ myValue, myOtherValue, doInitiateSignIn }) => (
  <div onClick={doInitiateSignIn}>
    {myValue} {myOtherValue}
  </div>
)

// Here we use `connect()` to specify which selector values and action creators
// that we want to use.
// Note that it is quite inexpensive to connect many components since the diffing
// happens outside of the component entirely.
// If you try to connect something that doesn't exist, it will error at runtime
// for easier debugging
export default connect(
  'selectMyValue',
  'selectMyOtherValue',
  'doInitiateSignIn',
  MyComponent
)

credits

Thanks to @developit and @marvinroger for getting this going.

changelog

1.2.0 - Fix display name wrapping and decorate with "connect": connect(WrappedComponent).
1.1.1 - Fixed publishing issue.
1.1.0 - Pass through display name of wrapped component. Thanks @aulneau!
1.0.1 - Support store.action method if available for easier support for running in a worker. Thanks @huygn
1.0.0 - Initial publish

license

MIT

WIP useConnect Hook

Hooks were recently announced with the release of an alpha of React 16.7.0. I wrote up a connect hook that I'm using in one of my apps that seems to work pretty well:

// Provider
import React, { Children } from 'react';
import { ReduxBundlerContext } from './context';

export const Provider = ({ store, children }) => (
  <ReduxBundlerContext.Provider value={{ store }}>
    {Children.only(children)}
  </ReduxBundlerContext.Provider>
);

// useConnect.js
import React, { useContext, useEffect, useState, useMemo } from 'react';
import { ReduxBundlerContext } from './context';
import produce from 'immer';
const spread = produce(Object.assign);

const cookArguments = (store, args) => {
  const keysToWatch = [];
  const actions = {};

  args.forEach(keyName => {
    if (keyName.slice(0, 6) === 'select') {
      keysToWatch.push(keyName);
      return;
    }

    if (keyName.slice(0, 2) === 'do') {
      actions[keyName] = (...args) => {
        if (store.action) {
          return store.action(keyName, args);
        }
        return store[keyName](...args);
      };
      return;
    }

    throw Error(`Can Not Connect: ${keyName}`);
  });

  return [keysToWatch, actions];
};

export const useConnect = (...args) => {
  const { store } = useContext(ReduxBundlerContext);
  const [keysToWatch, actions] = useMemo(() => cookArguments(store, args), [
    store,
    args
  ]);

  const [mappedState, setState] = useState(() => store.select(keysToWatch));

  const stateHandler = changes =>
    setState(currentState => {
      if (spread(currentState, changes) === currentState) {
        return null;
      }
      return spread(currentState, changes);
    });

  useEffect(() => {
    const unsubscribe = store.subscribeToSelectors(keysToWatch, stateHandler);
    return () => {
      unsubscribe();
    };
  }, []);

  return {
    ...actions,
    ...mappedState
  };
};

// context.js
import { createContext } from 'react';
export const ReduxBundlerContext = createContext(null);

Example usage:

const WalletPage = memo(({ ...rest }) => {
  const { signedIn, wallets, transactions } = useConnect(
    'selectSignedIn',
    'selectWallets',
    'selectTransactions'
  );

  return <Box>...</Box>

});

Any feedback would be appreciated!

Best
t

henrikjoreteg / redux-bundler-react Goto Github PK