Can't access state using 'useStoreState in react easy-peasy

Question

I recently decided to learn about state management with easy-peasy, and followed along the basic tutorials, but i can't seem to access the state. Here is the App component :-

import model from './model';   
import Todo from './components/Todo.tsx';  
import { StoreProvider, createStore } from 'easy-peasy';

const store = createStore(model);  
function App() { 
  return (
    <StoreProvider store={store}>
    <div className="App">
      <Todo />
      </div>
    </StoreProvider>
 );
}

export default App;

Here is the model file 'model.js'

export default {
    todos: [
        {
            id: 1
        },
        {
            id: 2
        },
        {
            id: 3
        }
    ]
};

And this is the Todo file:-

import React from 'react';
import {useStoreState } from 'easy-peasy';

const Todo = () => {
   //The line below does not work for me, when i do 'state.todos' i get an error that todos does not exist on type 
    const todos = useStoreState(state=>state.todos);
    
    return (
        <div>
            
      </div>  
    );
}

export default Todo;

Help us out by doing some general debugging: `useStoreState(state=>console.log(state))` what do you get? Is the error a typescript error or runtime JS error? — Brian Thompson, Mar 25 '21 at 15:09
On doing the console.log I do get the object that contains 'todos' as defined in the model.js file. But I do not understand why i can't access it by doing "state.todos". — Ashim Khan, Mar 25 '21 at 15:17
That leads back into the second question - Is the error a typescript error, like in your editor? Or does it break in the browser? — Brian Thompson, Mar 25 '21 at 15:18
Both. Shows an error in the Editor, as well as the error below in the browser. TypeScript error in D:/react/easy_peasy/learner/src/components/Todo.tsx(5,58): Property 'todos' does not exist on type 'StateMapper<_Pick<{}, never>>'. TS2339 — Ashim Khan, Mar 25 '21 at 15:21
Ok, that's important because it tells us that the issue is not with the data, but with the types missing from your functions. To prove it, try this `useStoreState((state: any)=>state.todos)` (this makes typescript pointless, so don't leave it like this, its just to make sure we're tracking down the right error). — Brian Thompson, Mar 25 '21 at 15:24
Assuming that removes your error, refer to this section of the docs for adding correct types https://easy-peasy.now.sh/docs/typescript-api/state.html — Brian Thompson, Mar 25 '21 at 15:26
Yup that fixed it, and the link you've mentioned seems to be cool to understand things better, thanks for the help! — Ashim Khan, Mar 25 '21 at 15:29

score 0 · Answer 1 · answered Apr 12 '21 at 13:09

0

Try removing the .todos so that

const todos = useStoreState(state=>state.todos);

turns into:

const todos = useStoreState(state=>state);

answered Apr 12 '21 at 13:09

Mainly Karma

437
2
12

score 0 · Answer 2 · edited Feb 22 '23 at 09:14

import React from 'react'
import { useStoreState } from 'easy-peasy';

import Feed from './Feed'
const Home = ({isLoading,fetchError}) => {
  const { searchResults} = useStoreState((state)=>state.searchResults)
    return (
      <main className='Home'>
        {isLoading && <p className='statusMsg'>Loading Posts ...</p>};
        {fetchError && <p className='statusMsg' style={{ color: "red" }}>{ fetchError }</p>};
        {!isLoading && !fetchError && (searchResults.length ? <Feed posts={searchResults} />: <p className='statusMsg'>No posts to display</p>)}
      </main>
    )
}

export default Home;

Can't access state using 'useStoreState in react easy-peasy

2 Answers2