Comments (11)
It is more advised to just use the [] argument option, like:
useEffect(() => {
// actions here
}, [])
from easy-peasy.
You could try something like this:
fetch: effect(async (dispatch, payload, getState) => {
const articleCollection = firebase.firestore().collection("article");
const articles = await articleCollection.get();
const saved = [];
articles.forEach(function (doc) {
saved.push(doc.data());
});
dispatch.article.fetched(saved);
})
from easy-peasy.
Your integration with firebase isn't really correct, the forEach method that you area calling doesn't return to the "then" method, you have to set an accumulator and then pass it to the dispatcher. Also, you're probably dispatching before the articles are fetched.
from easy-peasy.
You could try something like this:
fetch: effect(async (dispatch, payload, getState) => {
const articleCollection = firebase.firestore().collection("article");const articles = await articleCollection.get(); const saved = []; articles.forEach(function (doc) { saved.push(doc.data()); }); dispatch.article.fetched(saved);
})
Thanks, that was smart! I tried that, but I still get an endless loop and no data shown when trying to render. Also tried to console.log the state... endless loop here too.
const articles = useStore(state => state.article.items);
useEffect(() => {
console.log(articles)
});
from easy-peasy.
Where are you calling the "initialise" method?
from easy-peasy.
In the parent component of the Article component.
const App = () => {
const initialise = useAction(actions => actions.initialise);
const articles = useStore(state => state.article.items);
useEffect(() => {
/*initialise();*/ //removed because of endless looop
console.log(articles); //returns nothing
});
return (
<Article />
)
}
from easy-peasy.
That's it, you shoudn't call the initialise method inside the useEffect hook
from easy-peasy.
The Easy-Peasy example did that. Where should it be called then? Where ever I call it it goes to infinite loop..
from easy-peasy.
The useEffect triggers whenever your app mount, and when your state update, so when the articles are fetched, it will call the useEffect again... You can call the initialise method outside the useEffect, or simple add the second argument [] to useEffect, so it will run only on the initial mount.
Edit: Dont't call the method outside the useEffect, follow the example of my next comment.
Edit II: Also, the Easy-Peasy example is not directly using the state on the component it is calling "initialise", so it can call the initialise method without rerendering the component.
from easy-peasy.
Ahhhh!!! Solved it. Where can I find info about second argument []? Nothing in the React docs.
Also had to change the fetched action to this:
fetched: (state, payload) => {
return {
...state,
items: payload
};
}
from easy-peasy.
You can find more about the [] argument in the docs, look for the footer note:
https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
from easy-peasy.
Related Issues (20)
- Misleading documentation on destructuring compted properties HOT 9
- Differences between `computed` and a hook HOT 6
- Non-stylistic differences between actions and thunks? HOT 2
- undefined store on "contextmenu" event HOT 2
- Cannot assign other store action to property HOT 4
- RangeError "Maximum call stack size exceeded" on clone function HOT 3
- Unable to alias `Unstable_EffectOn` type
- Inform users about immer workings for complex objects HOT 4
- Disable merge in easy peasy HOT 2
- HMR using Vite: module is not defined HOT 1
- Persist state with boolean false as default value? HOT 1
- Updating State HOT 2
- Broken in NextJS 13 with React 18 HOT 6
- Performance: Modifying data is too time-consuming HOT 3
- Property 'user' does not exist on type 'StateMapper<FilterActionTypes<{}>>' HOT 2
- Support for collection of nested models HOT 5
- Is it still maintained? HOT 2
- Next.js 13 example with Experimental App Directory HOT 3
- TypeError: proxy handler is null HOT 3
- Computed props which depend on computed props that consume store state don't update as expected
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from easy-peasy.