- https://www.sitepoint.com/organize-large-react-application/
Main takeaways:
application structure is broken up by feature functionality, not component type, requires in webpack are shallower so folder traversing is easier,
actions and reducers live in the same file ala https://github.com/erikras/ducks-modular-redux
-DUCKS: namespace action names within the reducer to prevent collisions ala: "delivery/ADD_DELIVERY_ITEM";
- https://jaysoo.ca/2016/02/28/organizing-redux-application/ Main takeaways: application structure is broken up by feature functionality not component type, Create a feature functionality index in which all other components, actions and reducers originate, use this index to allow components and modularity to be shared with other feature functionality folders. Levy calls to connected state of other features, by adding data manipulations on the parent feature, that way when the data contract changes in the parent feature, child features that implement the method will not have to be refactored. Ultimately this is to prevent circular dependencies.
a good case for this, would be when utilizing a list of item on another component, make the filtering and formatting occur on the parent component, and send the result back to the child component, so that it can literally parameterize the filter by value.
Other Ideas:
React Components do not need to do data calculation, props that are sent into a connected component should be fully calculated. This allows us test components in the future.
an example of this would be
const mapStateToProps = (store, props) => {
let { a, b } = store.aReducer;
isAdmin = a.includes('admin');
return { isAdmin, b, props }
}