Context store is not updated after rerender

[Karmalakas]

I've created this simple sample app:
https://codesandbox.io/p/devbox/easy-peasy-react-forked-md376g?workspaceId=ws_35cKvUaUVNX57j1k4PJ1Zb

import React from "react";
import {
  createContextStore,
  createStore,
  StoreProvider,
  useStoreState,
  useStoreActions,
  action,
} from "easy-peasy";

const myStore = createStore({
  toggle: true,
  doToggle: action((state) => {
    state.toggle = !state.toggle;
  }),
});

const ContextEnable = createContextStore((runtimeModel) => {
  if (runtimeModel === undefined) {
    throw new Error("Error!");
  }

  return { enable: runtimeModel.enable };
});

const Updater = () => {
  const toggle = useStoreActions((actions) => actions.doToggle);

  return <button onClick={toggle}>Update</button>;
};

const Button = () => {
  const enable = ContextEnable.useStoreState((state) => state.enable);

  console.log("BUTTON", enable);

  return <button>Button</button>;
};

const Buttons = () => {
  const toggle = useStoreState((state) => state.toggle);

  console.log("BUTTONS", toggle);

  return (
    <ContextEnable.Provider runtimeModel={{ enable: toggle }}>
      <Button />
      <Button />
    </ContextEnable.Provider>
  );
};

const App = () => {
  return (
    <StoreProvider store={myStore}>
      <Updater />
      <hr />
      <Buttons />
    </StoreProvider>
  );
};

export default App;

If you open Console and keep clicking the "Update" button, you will see 2 log entries:

• BUTTONS - main store entry is updated
• BUTTON - context store entry is not updated

I would expect, when main store is updated and Buttons rerendered, context would be updated and Button would get a new value from there

I found this question on SO for plain React (w/o easy-peasy), but I don't really get it and it seems way overcomplicated. So I was wondering:

• What am I doing wrong?
• Is there maybe a simpler approach to solution with easy-peasy?

Thanks in advance
Been sitting on this all day now 😞

[Karmalakas]

I just recreated a Redux version, and this one seems to be working as expected 😕
https://codesandbox.io/p/devbox/react-easy-peasy-context-fail-demo-forked-v842l6?workspaceId=ws_35cKvUaUVNX57j1k4PJ1Zb

import React, { createContext, useContext } from "react";
import { Provider, useSelector, useDispatch } from "react-redux";
import { configureStore, createSlice } from "@reduxjs/toolkit";

const toggleSlice = createSlice({
  name: "toggler",
  initialState: {
    value: false,
  },
  reducers: {
    doToggle: (state) => {
      state.value = !state.value;
    },
  },
});

const myStore = configureStore({
  reducer: {
    toggler: toggleSlice.reducer,
  },
});

const ContextEnable = createContext(false);

const Updater = () => {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(toggleSlice.actions.doToggle())}>
      Update
    </button>
  );
};

const Button = () => {
  const enable = useContext(ContextEnable);

  console.log("BUTTON", enable);

  return <button>Button</button>;
};

const Buttons = () => {
  const toggle = useSelector((state) => state.toggler.value);

  console.log("BUTTONS", toggle);

  return (
    <ContextEnable.Provider value={toggle}>
      <Button />
      <Button />
    </ContextEnable.Provider>
  );
};

const App = () => {
  return (
    <Provider store={myStore}>
      <Updater />
      <hr />
      <Buttons />
    </Provider>
  );
};

export default App;

[Karmalakas]

Created an issue - #951

[jmyrland]

As stated in #951, the context store model is only initialized once - so it will only receive the initial runtimeModel-data passed to ContextEnable.Provider, that is why the ContextEnable state doesn't change with the root store.

I'll preface that I don't understand the requirement for nesting a root store with context stores, sharing states like this.

Some solutions to get the updated state:

1. Avoid the context store entirely; rely only on the root store: sanbox
2. Update the context store manually via useEffect: sandbox

[Karmalakas]

If you wish to create a whole new runtime model you need to remount the Provider

What does this mean exactly? I thought rerendering the component where provider is, does that. Sorry if this is a silly question, but I'm still learning.

1. My app is really complex with lots of nested elements of different types and the example I provided is simplified to the minimum just to show my problem. Button in my app is nested deep and doesn't really know about that parent, where the provider is. Also, adding temporary values to the main state doesn't seem like the right approach - this context provider holds some more data, than just a single flag, which is updated on button click
2. I believe you've pasted a wrong link. I don't see useEffect() in your suggested solution 🧐

BTW, I was also trying to find more info about context store injections use case, but couldn't. Is there some article maybe I could check about the use case?

[jmyrland]

You are right, the use effect link is incorrect.
But it seems like you found a solution that works for you 👍

Here is the docs for context store injections. This is an alternative for regular store injections.

[Karmalakas]

I think there's maybe something wrong with the search on EP page then. As I mentioned, I was searching, but couldn't find much. Here's the thunk page you linked to and there's clearly an injections word in the content, but search shows only context store and typescript pages:

[Karmalakas]

OMG... It's as simple as adding a key prop to the component, which holds the context provider. Prop should be updated depending on the changed main state...

This works as expected

const Buttons = () => {
  const toggle = useStoreState((state) => state.toggle);

  console.log("BUTTONS", toggle);

  return (
    <ContextEnable.Provider key={toggle} runtimeModel={{ enable: toggle }}>
      <Button />
      <Button />
    </ContextEnable.Provider>
  );
};

Thanks again for pointing to the right direction 🙏