Documentation make no sense. (Typescript)

Followed this: https://easy-peasy.vercel.app/docs/tutorials/typescript.html

then end-up like this

interface Todo {
    text: string;
    done: boolean;
}

interface StoreModel {
    todos: Todo[];
}

interface TodosModel {
    todos: Todo[];
    completedTodos: Computed<TodosModel, Todo[]>;
    addTodo: Action<TodosModel, Todo>;
    saveTodo: Thunk<TodosModel, Todo>;
}

const store = createStore<StoreModel>({
    todos: [],
    completedTodos: computed((state) => state.todos.filter((todo) => todo.done)),
    addTodo: action((state, payload) => {
        state.todos.push(payload);
    }),
    saveTodo: thunk(async (actions, payload) => {
        const result = await axios.post('/todos', payload);
        actions.addTodo(result.data);
    }),
});

export default store;

which look like this https://prnt.sc/C-FuQtxZDvpU then: https://prnt.sc/ZO6_XK27F_D-

I still can’t figure out what is the issue. I see one issue is the documentation.

** "easy-peasy": "^5.0.4" "typescript": "^4.6.4" on PHPStorm 2022.1

[jmyrland]

When you say sub-store, though, you still only have one top-level call to createStore, like in the example you linked to right? i.e. you can still access all of your nested models via a single useStoreState hook.

Correct 👍

Also, I initially thought you meant adding an additional section the docs tutorial section, but now I see you mean adding an example project. This may take me a bit more time to put together but I will still keep this on my todo list.

Oh I see 😅 sorry for the confusion.

Any help is appreciated 👏

[jmyrland]

@jmyrland Ok, cool - I can work on one for multiple slices and how to organize across several files. May take a bit for me to put it together but I’ll def get on it.

That would be awesome. Take a look at #773 if you need inspiration or a project template.

Let me know if this makes sense. I will try to throw together a codesandbox at some point. You can also go a step further if you have many actions / thunks / computed props and put them all in individual files and export them all from an index file (e.g. actions becomes a directory with an index file and all actions in the directory are exported from there so you can still do import * as actions from “./actions”; and get the type required for slice model).

Nice @no-stack-dub-sack ! Your examples look really neat 👍 I think this setup would work great, especially for big slices/stores.

@jmyrland Sounds like you have lots of easy-peasy apps in prod, do you have a different approach or do you mostly have flat stores or slices defined in a single file?

We use multiple slices (we call them nested stores/sub-stores), even up to 3-4 levels deep. Our slices are primarily in a single file - as the slices themselves aren’t that big.

Because of our usecase, we treat models for each section a bit like “css modules” - we want them to live along side the component. So typically we have a Component.tsx and a Component.model.ts for the store model related to the component. This basically means that our file structure basically mirrors our state object.

All these component models are then nested into slices and referenced in our main model.ts.

That’s the gist of it. It’s a bit tricky to exemplify, but I’ll think of some way to make an example of this when I got some spare time.