reactjs


Move the logic into new action


I have the some component. This component contains method "componentWillReceiveProps".
This method contains roughly the logic:
componentWillReceiveProps(nextProps) {
if (this.props.someObject.obj1.prop1 != nextProps.someObject.obj1.prop1
|| this.props.someObject.obj2.prop2 != nextProps.someObject.obj2.prop2) {
this.props.doAction1(nextProps.someObject);
}
//any code
}
the "this.props.doAction1" - is action.
Is it ok if I create the new action and moving this logic into new action?
For example:
function newAction(current, new){
if (current.obj1.prop1 != new.obj1.prop1
|| current.obj2.prop2 != new.obj2.prop2) {
doAction1(new);
}
}
And modify the componentWillReceiveProps:
componentWillReceiveProps(nextProps) {
this.props.newAction(this.props.someObject, nextProps.someObject);
//any code
}
If doAction1 is a redux action creator you cannot call it without wrapping it with a dispatch. Calling doAction1(...) directly won't trigger your reducer.
Presumably you've used mapDispatchToProps to receive doAction1 as props to your component, so can invoke it like this: this.props.doAction1(...). That is, this.props.doAction1 is essentially a dispatch wrapped doAction1.
So if what I understand is correct you want something like this:
a method to do the comparison and dipatch your action as a callback
// the 'newAction' method
function checkAndDispatch(current, new, callback){
if (current.obj1.prop1 != new.obj1.prop1
|| current.obj2.prop2 != new.obj2.prop2) {
callback(new);
}
}
and inside your component:
componentWillReceiveProps(nextProps) {
checkAndDispatch(this.props.someObject, nextProps.someObject, this.props.doAction1);
// ...
}
Points to ponder:
In Redux action creators are functions which return an object with a type key. The type is the target reducer.
To trigger the target reducer, action creator should be wrapped with a dispatch when it is invoked.
So what you've written is correct if you want to send both newAction and doAction1 as props to the component.
From your code, I think it might be better if you define 'newAction' as your component's function.
Just define it inside your component and bind it. It should be invoked as 'this.newAction'
You can also bind it to your component like this:
newAction = (current, new)=>{
if (current.obj1.prop1 != new.obj1.prop1
|| current.obj2.prop2 != new.obj2.prop2) {
doAction1(new);
}
}
I think you're using term action in a wrong way. Action should provoke the update of reducers. Not a component logic, so it should be a method of the component or just a function if you want.
If you really mean action — don't use it in componentWillReceiveProps (this is the wrong pattern at all). In this case, you're risking to get
a recursive updating of app
mess in the state logic
inconsistent state
So if you want to provoke state updating (call reducer) if some objects have been changed (by reducer) — you'd better do it in the reducer (if that objects updating in other reducers — you can use redux-thunk / redux-saga). Also, it's better to call only one action for all these changes, to ensure consistency of the state.
Summary:
Actions should provoke atomic updates of the state. If you're composing a lot of reducers that don't know about other objects that you want to change — use redux-thunk or redux-saga, prepare data for reducers and call only one action, that should be used in a few reducers.
Don't move a logic of updating state into components (this is the same that you're using MVC and updating your Model from View).

Related Links

cannot display no browser support message
Building client api for integration within a react project
using webpack ProvidePlugin in React storybook custom webpack config
Render table columns that will fill full width.
React Universal App: Authenticated API Calls
How to get content of a DOM element without being in the React context
onclick of input /textarea field getting [object Object]
Facing issue with react- after npm start
Offline Routing in React-Native-Maps by AirBnb
Migrating from monolithic .NET ecommerce platform to ReactJS
How to use a script in package.json file to make changes to source files
Animate clipping images in react-native
The reducer does not transmit the initialState
ReactJS => local image not loading
How to handle multiple windows in Electron application with React.JS?
React overrideing a function with = and => notation Issue

Categories

HOME
postgresql
gcc
model-view-controller
azure-active-directory
cors
fortran
cluster-analysis
customization
grpc
android-ndk
c++builder
boxplot
stdout
okhttp3
bitbucket
glympse
kohana
schema
ephesoft
rename
google-app-maker
unreal-engine4
expo
tmux
comma
android-notifications
opendaylight
bookmarklet
taxonomy
ibatis
loader
glibc
opengraph
smali
google-drive-android-api
email-client
meteor-accounts
osgi-bundle
textview
blockly
choco
wercker
javafxports
android-databinding
outlook-2010
byobu
redbean
pyexcel
compiler-warnings
python-venv
f#-fake
taleo
django-cors-headers
lucee
multivalue
node-java
wicketstuff
recursive-query
racket-student-languages
toggleclass
mavlink
virtualenvwrapper
trendline
sqldataadapter
videoview
jcomponent
event-tracking
persian
page-flipping
dnvm
tokudb
tinymce-plugins
genome
mergecursor
beagleboard
asp.net-2.0
xmla
backtrace
nsq
fedena
launcher
parsefloat
visual-studio-setup-proje
fastcgi-mono-server
nomachine
nop
sygic
tlbimp
caroufredsel
zend-db-table
wpd
uikit-dynamics
bho
gwt2
configurationsection
m3u
netzke
custom-cursor
sup
github-archive
reflexil
stl-algorithm
fileoutputstream
digg
symfony-1.2
file-processing
noise-reduction
cinder
xslt-grouping
hp-trim
mdd
rpxnow
scalable
paperless

Resources

Encrypt Message