In order to use await, the function directly enclosing it needs to be async. According to your comment, adding async to the inner function fixes your issue, so I’ll post that here: export const sendVerificationEmail = async () => async (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: … Read more
You need pass to onClick reference to function, when you do like this activatePlaylist( .. ) you call function and pass to onClick value that returned from activatePlaylist. You can use one of these three options: 1. using .bind activatePlaylist.bind(this, playlist.playlist_id) 2. using arrow function onClick={ () => this.activatePlaylist(playlist.playlist_id) } 3. or return function from … Read more
Fetch promises only reject with a TypeError when a network error occurs. Since 4xx and 5xx responses aren’t network errors, there’s nothing to catch. You’ll need to throw an error yourself to use Promise#catch. A fetch Response conveniently supplies an ok , which tells you whether the request succeeded. Something like this should do the … Read more
Export the store from the module you called createStore with. Then you are assured it will both be created and will not pollute the global window space. MyStore.js const store = createStore(myReducer); export store; or const store = createStore(myReducer); export default store; MyClient.js import {store} from ‘./MyStore’ store.dispatch(…) or if you used default import store … Read more
Assuming that you are using webpack, you need to import the image in order to display it like <img src={require(‘images/06.jpg’)} alt=”product” /> Now that your image data is dynamic, directly specifying the import path like <img src={require(image)} alt=”product” /> doesn’t work. However you can import the image by making use of template literals like <img … Read more
As Context is no longer an experimental feature and you can use Context in your application directly and it is going to be great for passing down data to deeply nested components which what it was designed for. As Mark Erikson has written in his blog: If you’re only using Redux to avoid passing down … Read more
The approach I suggest is a bit verbose but I found it to scale pretty well into complex apps. When you want to show a modal, fire an action describing which modal you’d like to see: Dispatching an Action to Show the Modal this.props.dispatch({ type: ‘SHOW_MODAL’, modalType: ‘DELETE_POST’, modalProps: { postId: 42 } }) (Strings … Read more
Reducer is never an appropriate place to do this because reducers should be pure and have no side effects. I would recommend just doing it in a subscriber: store.subscribe(() => { // persist your state }) Before creating the store, read those persisted parts: const persistedState = // … const store = createStore(reducer, persistedState) If … Read more
I feel like none of the answers have crystallized why mapDispatchToProps is useful. This can really only be answered in the context of the container-component pattern, which I found best understood by first reading:Container Components then Usage with React. In a nutshell, your components are supposed to be concerned only with displaying stuff. The only … Read more
There are differing opinions on whether accessing state in action creators is a good idea: Redux creator Dan Abramov feels that it should be limited: “The few use cases where I think it’s acceptable is for checking cached data before you make a request, or for checking whether you are authenticated (in other words, doing … Read more