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
- Why does not localStorage save the last symbol in this component?
- React TypeError: Cannot read properties of undefined (reading 'state')
- How to pass data from functional component to class component
- With React, how can I keep a ref from being undefined/null?
- How can I fetch data from a Websocket in React?
- ERR_EMPTY_RESPONSE error in authorization Laravel
- ReactJS use a webcomponent in JavaScript
- How to use React component in Angular 6 application
- How do I set a scrollbar height within a reactjs return statement?
- How can I edit navigationOptions for each screen in nested tabNavigation?
- React hook form setValue returns undefined with multi select (react-select)
- React Router - Change state of other components
- ReactJs 0.14 - TreeView
- How to add ALL (*) route that has the same prefix as base?
- Custom alert dialog in react native?
- React: Uncaught TypeError: this.state.data.map is not a function and
- Why do I have to specify the index position using .map?
- How to connect timeline in gsap react for different elements?
- Need to show only one month in range picker selection area antd
- Can't see my state updated if i console.log outside the axios .then function
- Styled-Components Pass Props For Condition
- NextJs app API behaves inconsistent on Vercel
- FontAweSome, why? Type '"acquisitions-incorporated"' is not assignable to type 'IconName'
- Electron IPC and nodeIntegration
- Add an asterisk for a mandatory field in jsx and scss
- Webcam light doesnt turn off after setting the video constraint to false in webRtc
- Filtering input fields in reactjs
- How to Iteratively Store Multiple API Calls into a useState Array
- TablePagination Reactjs error KeyboardArrowRight
- How to make circle as table using konva react