Add value field to Provider for reusability. #2

Lunuy · 2021-09-30T06:42:59Z

What version of this package are you using?
0.2.1

What problem do you want to solve?
Default value of store is fixed so store's reusability is not good.

What do you think is the correct solution to this problem?
Add value option to Provider props. It will looks like original Context API's Provider.
It makes breaking change (because value field of Provider is required field), so I want to know how do you think about it.

Are you willing to submit a pull request to implement this change?
After maintainer's feedback, yes.

Example

import createStore from "fragmented-store";

const { Provider, useUsername, useAge, useStore } = createStore({
  username: "Aral",
  age: 31
}); // It is just default values that used when hook can't find appropriate Provider.

export default function App() {
  return (
    <Provider value={{
        username: "Aral",
        age: 31
    }}>
      <Title />
      <UpdateTitle />
      <Age />
      <AllStore />
    </Provider>
  );
}

The text was updated successfully, but these errors were encountered:

aralroca · 2021-09-30T10:37:58Z

I agree! I like the idea

aralroca · 2021-09-30T19:09:27Z

@Lunuy I implemented callbacks as a second param of createStore:

Docs
Example

Do you think it would also be interesting to switch to the provider? I think so, if you look at the example instead of an alert it can be used a dialog or rendered component. What do you think?

Lunuy · 2021-10-01T00:42:06Z

Yes, I think callbacks should in Provider's props instead of createStore's argument. Because user may want to use another Context / state in callback. If user wants separate callback definition and Provider usage code, user may make own Provider.

const defaultStore = {
  quantity: 2,
  userName: 'Aral',
  age: 31,
}

const { Provider, useQuantity } = createStore(defaultStore);

// Make own provider.
export const MyContextProvider = ({ store, children }) => {
    const apolloClient = useApolloClient();
    
    const callbacks = {
      quantity: (newValue, prevValue, setValue) => {
        // Update quantity on API
        apolloClient.mutate(...)
         // Revert state change if it fails
         .catch(e => setValue(prevValue))
      },
      age: (newValue, prevValue, setValue) => {
        if (newValue > 100) {
          alert("Sorry, no more than 100 😜");
          setValue(prevValue);
        }
      }
    }
    
    return (
        <Provider store={store} callbacks={callbacks}>
            {children}
        </Provider>
    );
};

#4

aralroca · 2021-10-13T16:53:28Z

Done on fragstore 0.4.0 (fragmented-store is renamed to fragstore)

Lunuy changed the title ~~Add value option to Provider for reusability.~~ Add value field to Provider for reusability. Sep 30, 2021

aralroca closed this as completed Oct 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add value field to Provider for reusability. #2

Add value field to Provider for reusability. #2

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Add value field to Provider for reusability. #2

Add value field to Provider for reusability. #2

Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!