score:3
TypeError: Cannot read property 'then' of undefined at
.done
getter is deprecated since v1, so .toPromise()
is the way to listen for a saga resolve
As for waiting sagas to complete, there is a special END
action that you can dispatch to terminate saga when all its child tasks are complete, causing store.runSaga(rootSaga).toPromise()
promise to resolve.
When the promise is resolved (meaning that all required data is already there), you should send result HTML received from renderToString
in response. Notice that server-rendered components aren't really mounted, so componentDidMount()
method won't be triggered, thus your data won't be fetched twice.
So you can modify your code as follows:
// server.js
...
import { END } from 'redux-saga';
app.get('*', (req, res) => {
const store = createStore();
const branch = matchRoutes(Routes, req.path);
store.runSaga(rootSaga).toPromise().then(() => {
res.send(renderer(req, store))
});
// trigger data fetching
branch.forEach(({ route }) => {
route.loadData && route.loadData(store)
});
// terminate saga
store.dispatch(END);
});
Also, you can follow this example.
score:0
I was able to find one way to get around this problem ,But this is not that clean of a solution and i do-not want to do it for every loadData method + the saga . I was able to abstract it is there a cleaner way of achieving this as i am still not satisfied with the answer
loadData in Component
const loadData = (store) => {
//store.dispatch({type: FETCH_USERS})
return new Promise((resolve) => {
store.dispatch({type: FETCH_USERS, callback: resolve })
});
}
Saga
function asyncCallBackUtil(action){
if (action.callback) {
action.callback('Done');
}
}
export function* fetchUsers(action) {
const res = yield call(getUsers);
yield put({ type: SAVE_USERS, payload: res.data});
asyncCallBackUtil(action);
}
Now i can use Promise.All as mentioned on the Post
Promise.all(promises).then(data => {
console.log('here',data);
res.send(renderer(req, store))
})
Is there a cleaner way for this problem as i need to do it for other saga's too .
Source: stackoverflow.com
Related Query
- How do we return a Promise from a store.dispatch in Redux - saga so that we can wait for the resolve and then render in SSR?
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- Redux Toolkit w/ TypeScript: how can I properly type the return value from an async thunk
- How to store data from API so that it can be accessible in other components
- How can I check the return value of dispatch in redux hook
- How can I make redux dispatch an action as well as return a promise?
- How can I promise chain a redux / sagas dispatch in React?
- How to return a promise from redux thunk action and consume it in component
- How can I get more than one value from the Redux store in a single statement?
- How can I get Promise return object from asynchronous function in another module
- How to dispatch to store from a file that isn't imported anywhere and returns nothing
- How can I delete a row using the reduce method from my redux store
- how can i create a helper type function in my redux module to return a filtered set of readonly data from state?
- How can componentDidMount wait for a value from redux store before executing (without using setTimeout)?
- How to dispatch a value from Textarea to store React Redux
- How do I access a function that is being updated from a redux store properly?
- How can I return immutable data from redux reducer?
- How can I setState() and dispatch a redux action (including that state) in the same function?
- React Redux - How to store form state so that it can be populated again when user returns to page
- How can I store the data I get from a Promise back into an object with the same key it came from?
- How can I grab a value from a Redux store from outside of a component?
- How can I dispatch a state change to redux when calling it from a function inside the component?
- How can I map over and object, that contains another Object I want to map over and return JSX from it?
- How to return a rejected promise from a function that wants to do some async processing first
- how can I make a function which will return a number of Schedule Dates that are matching with other Item_date from my database
- How to store the values from a component that is reused so that I can use the values later?
- How do I stop nested React components that dispatch Redux actions which update state from getting stuck in an infinite loop?
- working with setTimeout function that dispatch an action from redux and resolve a promise chain with fetch call
- How can I update react app that gets it's data from the node mongo backend using redux
- How can I store cookies on a local client that are returned from a local backend API?
More Query from same tag
- How to create a text component where first word of sentence to be bold?
- sendbird createMyGroupChannelListQuery return empty when recall
- Error: The `style` prop expects a mapping from style properties to values, not a string in ReactJS
- REACT JS How can I convert that to as a component?
- How to fix componentDidUpdate sending request over and over again
- Webpack module federation lazy loading remoteEntry.js
- Cannot display items by pasing value from different component
- React does not update style on rerender
- I am trying to create a box in React, and it is not working
- Use a ref to a DOM element both in parent and children components
- Send values from one browser tab to another in nextjs and populate formik form
- Error creating react app in termux on android phone
- How to automatically remove markers depending on Boolean value in JSON file
- How to pass the input value from child to parent in react typescript
- First steps in Redux. How to add value to mapStateToProps?
- Only show Popup one time with React (local storage)
- How to debug react tape unit test in VS code
- Cellrenderer and react-router-dom Link
- Rechart Legend masking the chart in Mobile
- Using dictionary to map against an API response and create array of objects, trying to remove duplicates
- React : wrap every 3 components into a div
- Adding dynamic meta tags to a React static site, created using StaticSiteGeneratorPlugin
- How to target backdrop color property of Material UI Dialog using styled components?
- .isArray not returning a value when expected
- React Text Input acting weird: Not letting me type
- Axios global interceptor for token refresh
- Using map function for array of string
- react-snapshot Static Files Build but Aren't Served on Local Environment
- Why prevState is equal to this.state in componentDidUpdate?
- Return array iteration