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

Categories

HOME
qlikview
gap-system
dynamic
crash
ebay
css-selectors
opacity
cdn
qt4
suitecrm
dynamics-crm-2011
virtualenv
swift3.1
game-engine
amazon-data-pipeline
samba
google-street-view
polybase
coccinelle
devexpress-mvc
windows-mobile
windows-10-mobile
units-of-measurement
request-uri
folder
undo
ibm-bpm
slim-lang
qt-designer
oracle-nosql
flickr
android-scrollview
traitsui
angularjs-resource
mapquest
queryover
lex
origami
ng-lightning
ninja-forms
icu
android-graphview
aspnetboilerplate
contenteditable
qt-quick
f#-fake
amazon-fire-tv
stream-socket-client
google-cloud-shell
jcifs
chain
msiexec
android-music-player
racket-student-languages
vga
window.location
jcalendar
nugetgallery
hana-sql-script
std
jersey-test-framework
angular-promise
android-togglebutton
cloud-storage
tess4j
playn
random-access
fedena
javadb
novell
system.net
dirname
parsefloat
behance-api
hotlinking
data-layers
kohana-orm
mandelbrot
wpd
rbm
libx264
yii-components
pinchzoom
inserthtml
parallel-python
execjs
opendir
auto-compile
hwnd
xhtmlrenderer
qprocess
mysql-pconnect
morfik
retrospectiva
opengl-to-opengles
j++

Resources

Encrypt Message