edriang/react-connect-context-hooks

Leverage your useReducer() + useContext() state-management solution with this react library that provides Redux-like connect bindings for accessing your store.

react-connect-context-hooks's Issues

Accepting object format for stateSelectors and actionSelectors

I'm currently working in migrating a large server side enterprise app that uses redux to react-connect-context-hooks. The main reason for this is to avoid having to load the full store on page load but rather do it incrementally. Dynamically adding reducers in redux is hard at the moment for server side rendering but looks promising with reat-connect-context-hooks. In order to do that, I was thinking of creating 2 stores, a tiny one for the landing page and a larger one to handle all the other pages.

We have a bunch of components/views like that:

const reduxProps = ({profile, watchlist}) => ({
  email: profile.email,
  watchlistLength: watchlist.domains.length,
  admin: profile.admin,
  dev: profile.dev,
  reseller: profile.reseller,
  dappDev: profile.dappDev,
});
const connector = connect(reduxProps, {signOutUser: signOutUserRedux});

export default connector(MainDrawer);

In order to migrate them to react-connect-context-hooks, we would have to do the following similar change:

export default withStore(MainDrawer, {
  stateSelectors: [
    'profile.email',
    'watchlist.domains.length:watchlistLength',
    'profile.admin',
    'profile.dev',
    'profile.reseller',
    'profile.dappDev'
  ],
  actionSelectors: ['auth.signOutUser: signOutUserRedux'],
});

Performing that change on all the 200+ components/views will be a bit painful. I was wondering if you were open to accepting objects for stateSelectors and actionSelectors. This would:

• be closer to the redux format so migrations are less painful
• make it harder to make mistakes (e.g., code editor will be able to help with you mistype state and action selectors

export default withStore(MainDrawer, {
  stateSelectors: {
    email: profile.email,
    watchlistLength: watchlist.domains.length,
    admin: profile.admin,
    dev: profile.dev,
    reseller: profile.reseller,
    dappDev: profile.dappDev,
  },
  actionSelectors: {
    signOutUser: signOutUserRedux,
  },
});

Thanks!

Hello

Would you like to update the library?

I want to React 16 -> 18
some warnings and not working (

warning " > [email protected]" has unmet peer dependency "@types/react@^16.8".
warning " > [email protected]" has incorrect peer dependency "react@^16.8.0".
warning " > [email protected]" has incorrect peer dependency "react-dom@^16.8.0".
warning "react-connect-context-hooks > [email protected]" has incorrect peer dependency "react@^16.0.0 || ^17.0.0".

Adding a store/reducer to an existent store

I'm currently working in migrating a large server side enterprise app that uses redux to react-connect-context-hooks. The main reason for this is to avoid having to load the full store on page load but rather do it incrementally. Dynamically adding reducers in redux is hard at the moment for server side rendering but looks promising with react-connect-context-hooks. In order to do that, I was thinking of creating 2 stores, a tiny one for the landing page and a larger one to handle all the other pages.

Is there a current way to add an additional store/reducer once a user navigate to a different page without losing the current state? For example, we would load storeA on the landing page then once the user navigates to a different page we would add storeB. This woud help reduce the amount of javsacript loaded on the landing page. Thanks!

createMergedStore not updating children

Hi,

I tried adding this library to a server side app built with next.js. I don't seem to be able to change page routes when using createMergedStore. The URL path change but the UI does not update with the new page. Is it possible this is happening because of React.memo?

react-connect-context-hooks/src/createMergedStore.tsx

Line 39 in 170be29

return React.useMemo(() => wrapper, []);

It works when I only use independent providers.

Actions function signature

I'm currently migrating an app from redux/redux-thunk to react-connect-context-hooks.

With redux-thunk actions have the following format:

const action = () => (dispatch, getState) => {};

In order to migrate to react-connect-context-hooks, a user needs to switch it to

const action = (dispatch, getState) => () => {};

Making this change for a few actions is fine but for 500+ actions it becomes inconvenient for users migrating to this library. Are you open to switching the order so that users who are migrating to react-connect-context-hooks don't feel like it's a blocker? Thanks!