reactjs
ReactJs - How to get updated state while inside a thunk promise
I am working on an application where prior to sending the data to the server we check if the fields are empty and fill them with dummy data. State before sending data to server: state = { title: '', body: '' } my dispatch function: this.props.dispatch((dispatch) => { dispatch(initializeProcessForm()); dispatch(processForm(state)); }); Inside initializeProcessForm I check if the fields are blank and fill them appropriately, but considering we should not mutate the state, I have to make a new state object and return. Here, I loose the reference to the current (new state after function completes) and when dispatch(processForm(state)) submits to the server, it still holds the old data with blank fields. How can I get around this problem without mutating the state react way? The only way I can access the new state is once I am in inside the reducer but the API call happens inside the Action before going to the reducer when I am handling success or rejection of the form.
The second argument passed to your thunks by redux-thunk is getState this.props.dispatch((dispatch, getState) => { dispatch(initializeProcessForm()); const updatedState = getState(); dispatch(processForm(updatedState)); });
Related Links
What does ReactJs offer that Polymer doesn't?
Trouble-shooting a basic test with React and Jest
Send stream object parameter to csharp from javascript
ReactJS Warning: Each child in an array or iterator should have a unique “key” prop
Changing HTML attributes of Elements in Mateial-UI Library
Sync react-router with mobx state
Testing React Component with Enzyme and Mocha
How do I correctly remove event listeners in React.js?
setState in react is not working in react component
Get state of a child component
Redux saga “rootSaga has been cancelled”
Does ReactNative actual height includes border and padding?
Uncaught TypeError: action.products.reduce is not a function
Finding error in jsx
Getting error in browser console on using “externals” for excluding node_modules
ReactJS how to loop through dynamically named refs