I'm building a mobile app with react-native and redux, I'm organizing my project structure by features in this way:

Component1/
---Component1Actions.js
---Component1Reducer.js
---...
Component2/
---Component2Actions.js
---Component2Reducer.js
---...

In my opinion this kind of project structure is amazing for many reasons, first of all for its great scalability. Only problem I have e across so far is when 2 different ponents have to dispatch the same actions (such as a simple text change in a textbox).
It wouldn't make sense to rewrite the exact same action in 2 different files and I also know that importing an action from one ponent to another ponent is really a bad practice. I thought about keeping these kind of "shareable" actions in a global module and then import them in the various ponents but I'm not sure if it is a good practice.
I would like to know the best way to handle this kind of situations.
Thanks in advance.

I'm building a mobile app with react-native and redux, I'm organizing my project structure by features in this way:

Component1/
---Component1Actions.js
---Component1Reducer.js
---...
Component2/
---Component2Actions.js
---Component2Reducer.js
---...

In my opinion this kind of project structure is amazing for many reasons, first of all for its great scalability. Only problem I have e across so far is when 2 different ponents have to dispatch the same actions (such as a simple text change in a textbox).
It wouldn't make sense to rewrite the exact same action in 2 different files and I also know that importing an action from one ponent to another ponent is really a bad practice. I thought about keeping these kind of "shareable" actions in a global module and then import them in the various ponents but I'm not sure if it is a good practice.
I would like to know the best way to handle this kind of situations.
Thanks in advance.

• javascript
• reactjs
• react-native
• redux

• In my opinion, if you are not consuming same state for different ponents at the same time, you can re-use the actions. But in future if you need to keep both ponents rendered at the same time and in same UI, it will force you to make another action type for the same. – anoop Commented Jul 31, 2016 at 0:39
• why can't the ponents import the action that does the dispatch? Can you explain why you need to duplicate it? – Warren Mira Commented Jul 31, 2016 at 1:16
• @WarrenMir because since my project is organized by features,if i write an action inside a ponents's module it's a really bad practise to import it in another module. – Alessandro Messori Commented Jul 31, 2016 at 1:20
• In principle, there's no reason you can't use a shared list of actions, and have each ponent have its own unique set of reducers for applying those actions to their state. That approach will bee problematic if you ever find an action in which a ponent needs a distinct action creator (because, for instance, one of the ponents needs to chain an async call and the others don't). So think about your domain before starting down that path. – S McCrohan Commented Jul 31, 2016 at 2:05
• @SMcCrohan Thank you,your answer cleared most of my doubts – Alessandro Messori Commented Jul 31, 2016 at 8:04

2 Answers 2

You can handle the same "ACTION_TYPE" in multiple reducers.

... actions are by design global. They are not meant to be tied to a particular reducer (Dan Abramov)

You could handle an "LOGOUT" action in all your reducers, which would just return the initial state.. and set the application to defaults

for example..

const postReducer = (state = initial, action) => {
  swtich(action.type) {
  ...
  case "LOGOUT": 
    return initial 
  default: 
    return state
  }
}

1. Define it in mon reducers.js, actions.js.
2. In pose pass it to REACT ponent connect(mapStateToProps, {monAction, ...actions})