Using solid with typescript: Is this code snippet a bad practice?

[samadadi]

Basically I am using solid context api and typescript to handle application state. Is this code a bad practice of using createState & createContext api or the whole code? If so please explain why? If you have any question about this code please ask me. Thanks.

import { Component, createContext, createState } from "solid-js";

interface AppState {
    // ...
}

interface AppProps {
    // ...
}

interface AppActions {
    // ...
}

interface AppStore extends Array<AppState | AppActions> {
    0: AppState;
    1: AppActions;
}

const defaultState: AppState = {
    // ...
};

const [state, setState] = createState(defaultState);
const defaultActions: AppActions = {
    // ...
};

const store: AppStore = [state, defaultActions];
export const App = createContext<AppStore>(store);
export const AppProvider: Component<AppProps> = props => {
    return (
        <App.Provider value={store}>
            {props.children}
        </App.Provider>
    );
};

[ryansolid]

This is fine.. Although there is some limits to what can live outside the render tree.. Computations like createEffect or createMemo won't work properly, so generally I don't recommend doing this if you have any desire to see this grow. Instead I recommend initializing your store inside the provider. Of course this makes typing a bit annoy since context in theory can fail to find so it is nullable. I do realize it is difficult for typing at create. I've debated even removing the default state since it has limited use, but then again you can use Context API with anything.

To be fair the simplest state management with Solid is just creating a signal in a file and export it.. It's more or less Svelte's stores, but I find the context pattern a lot more extensible.

This comment might be helpful: #300 (comment)

[samadadi]

Thank you so much.

[samadadi]

Is it OK to access state inside action functions directly or should I just pass state as an argument to every action function or every other functions inside function component in general? what about globals (window, ...)?

[ryansolid]

I think it's more than fine to wrap the state/state setters in the actions.. that's the idea. If making a global store I'd consider not sending setState itself down and sending specific actions that called setState. I'm unclear what globals or window have to to do with this. The Realworld Demo project has an example of this.