Reputation: 927
I have multiple reducers and I need to send separate actions for each of them on a click so this is what I did:
<TouchableOpacity
style={[styles.button, styles.edit]}
onPress={()=>{
this.props.toggleCurrentTask(this.props.task);
this.props.triggerUpdating(id);
}}
>
<Text>Edit</Text>
</TouchableOpacity>
but the toggleCurrentTask
action didn't work and I was struggling for a while, at the end just replacing them solved my problem!
like this:
onPress={()=>{
this.props.triggerUpdating(id);
this.props.toggleCurrentTask(this.props.task);
}}
So I thought maybe calling two actions at the same time is a bad practice. If that's the case, what should I do instead?
Upvotes: 0
Views: 826
Reputation: 4281
This is fine, but you can also have different reducers react to the same action (type): In your example the reducer storing the updating
state could change its state when a toggleCurrentTask
action is dispatched:
const TOGGLE_CURRENT_TASK = 'task/TOGGLE_CURRENT_TASK';
/* update reducer */
const updatingState = {
isUpdating: false
}
const updatingReducer = (state = updatingState, action) => {
switch (action.type) {
case TOGGLE_CURRENT_TASK:
return {
...state,
isUpdating: true
}
}
}
/* task reducer */
const taskState = {}
const taskReducer = (state = taskState, action) => {
switch(action.type) {
case TOGGLE_CURRENT_TASK:
return {
...state,
activeTasks: action.task
}
}
}
IMO this keeps your React component cleaner and scales better, imagine your have to dispatch five different actions in the event handler instead of just two.
Upvotes: 2