ReactJS and Redux

Testable components of ReactJS and Redux

Simple components should pass the props directly rather than compute from a global Redux state and that is what Redux is a global consolidated state.  Apportion the state you need as a large data structure at the root element and then send it to the presentational components as direct props.

Simplifies testing and allows easy stub/mocks

Having Redux need to be loaded is painful and leads to chasing states from the manipulation where it then loops back on itself.

In this case get something to work and render properly without chasing around the reducers first.  Then debug the reducer to make sure it puts the props  reducer values from state in the same pattern/data.

There is a way to do both prop formats support, but it means looking at the mapStateToProps function a bit differently

// Row.jsx 
// first row example, use ownProps in certain cases
function mapStateToProps(state, ownProps) {
  return {
    rowData: state.rows || ownProps.row,
  };
}

You can use the ownProps to pass in prop data and in this case a good option would be to use ownProps as direct render components.  This makes things a bit confusing if ownProps is going to not be merged in some components and then not merged in other components, but it allows for standalone renders of components without debugging the reducers