Help with Redux implementation about jupyter-ui HOT 10 CLOSED

Hi @echarles, fortunately, I just managed to make it work. Thank you for suggesting the meeting; your support is greatly appreciated.

from jupyter-ui.

This has been discussed in #79 and resulted with a example you can link from https://jupyter-ui.datalayer.tech/docs/state/redux/

from jupyter-ui.

@BrandonEscamilla Maybe you have already seen that example, please tell me if it help or not, so I can look a bit more to the code you shared.

from jupyter-ui.

Hey @echarles, thank you for you answer, in fact, I did check out the resource you shared. But I'm a bit confused about whether I need to set up the store like we usually do in Redux, or is simply creating the store with const store = createReduxEpicStore(); enough? Also, I'm not sure if I have to worry about this part: injectableStore.inject('init', exampleReducer);. Any insights you could give me on this?
Appreciate your help!

from jupyter-ui.

const store = createReduxEpicStore(); enough? Also, I'm not sure if I have to worry about this part:

It should be enough

injectableStore.inject('init', exampleReducer);. Any insights you could give me on this?

The easiest is to start from the ExampleState file and change it to fit your needs. There may be other constructs to integrate Redux, but that example is the easiest I have found. You could copy/paste it and change it to your needs.

from jupyter-ui.

Hi @echarles, I'm currently encountering some challenges while trying to implement this. Could you please suggest any alternative resources or references that I can explore? Thank you in advance!

from jupyter-ui.

Just sent an invite to connect on linkedin and schedule a call. Is your repo public so I can already have a look?

from jupyter-ui.

That is awesome news ❤️ At some point, this community will benefit from your knowledge if this can be published in the open.

Anyway I let you share here what is possible, and let you close it after. Thx again.

from jupyter-ui.

Hey @echarles, thanks for the support. I managed to solve the issue by creating the store using the createReduxEpicStore() function provided by jupyter-ui, before I was creating the store using redux-toolkit but it was not working. In Next.js, I simply created the store using that function and passed it to the Redux provider. To access the store in the page where I'm using Jupyter notebooks, I used the useStore() selector. The example reducer is just a copy-paste of the one in the repo as well. Here's the code:

//layout.tsx

import { Provider } from "react-redux";
import { createReduxEpicStore } from "@datalayer/jupyter-react";

const store = createReduxEpicStore()
<Provider store={store}>
    {children}
</Provider>

//page.tsx
import { exampleReducer } from '@/redux/ExampleState';
import { Jupyter, notebookActions, createInjectableStore } from '@datalayer/jupyter-react';

const store = useStore()
const injectableStore = createInjectableStore(store);    
injectableStore.inject('init', exampleReducer);

<Jupyter
   injectableStore={injectableStore}
   .....
 >

// ExampleState.ts

import { useSelector } from "react-redux";
import actionCreatorFactory from "typescript-fsa";
import { reducerWithInitialState } from "typescript-fsa-reducers";
import { IJupyterReactState } from "@datalayer/jupyter-react";

/* State */

export interface IExampleState {
  foo?: Date;
}

export const initExampleState: IExampleState = {
  foo: undefined,
}

/* Selectors */

export const selectFoo = (): Date | undefined =>
  useSelector((state: IJupyterReactState) => {
    if (state.init) {
      return (state.init as IExampleState).foo;
    }
    return initExampleState.foo;
  }
);

/* Actions */

export enum ExampleActionType {
  UPDATE_FOO = "jupyterReact/UPDATE_FOO",
}

const actionCreator = actionCreatorFactory('jupyterReact');

export const exampleActions = {
  updateFoo: actionCreator<Date>(
    ExampleActionType.UPDATE_FOO
  ),
}

/* Reducers */

export const exampleReducer = reducerWithInitialState(initExampleState)
  .case(exampleActions.updateFoo, (state: IExampleState, foo: Date) => {
    return {
      ...state,
      foo,
    };
  }
);

from jupyter-ui.

Super! Thx for sharing. Closing as resolved.

from jupyter-ui.