React Redux - Finding a use case for connect() - reactjs

Question

Note: I'm using React Native but this applies to Reactjs also. I only use stateless functional components by design. I'm wanting to learn and use functional programming as much as possible. Does this essentially mean I can never use connect() from react-redux? Should I be adding more container components to my app design?
Here is an example of my components:
export const Height = (props, { store }) => {
const state = store.getState()
return (
<View style={formStyles.container}>
<DimenInput
value={state.get('height').get('height1').toString()}
onChangeText={text => store.dispatch(updateHeight(text, 1))}
/>
<Text style={formStyles.text}>{'&'}</Text>
<DimenInput
value={state.get('height').get('height2').toString()}
onChangeText={text => store.dispatch(updateHeight(text, 2))}
/>
</View>
)
}
Height.contextTypes = {
store: React.PropTypes.object
}
I also want to learn all common redux and react techniques that I will see in the industry so I wanted to learn mapStateToProps() and connect(). I started to try and create these functions for my component above:
const mapStateToProps = (state) => {
return state.get('height').get('height1').toString()
}
const mapDispatchToProps = (dispatch) => {
return {
onHeightChanged: (text) => {dispatch(updateHeight(text, 1))}
}
}
Before realising that I cannot use those functions on this stateless component. I have to use them on a container component that would essentially hold this component but I don't really have one, the container of this component is:
export const Volcalc = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>HEIGHT</Text>
<Height/>
<Text style={styles.text}>WIDTH</Text>
<Width/>
</View>
)
}
And then the container of that is just:
const App = () => {
return (
<Provider store={store}>
<Volcalc/>
</Provider>
)
}
The app I'm making is a single form - so it is tiny. At this stage I cannot see any situation where I would HAVE to use a container component. In a larger app would I be forced to use container components and then I will get the chance to use connect()? Which technique is better out of using only stateless, and using a container created with connect(), if it could be done either way?
Edit: this egghead lesson does something in between where they have a stateless component AddTodo that uses dispatch from the store and they call connect() on it. Possibly the scenario which would fit my use case for Height although I will need to keep passing it the full store since it uses store.get and store.dispatch - unless I pass it the store value for height instead of the full store.

Answer 1

By using connect on a container component you are keeping your app functional. Your data flows down to children. Your state is immutable.
Container components are useful in regards to connect because you're isolating your call to the store and, again, letting data flow down to child components. It's just a good way to structure your app and reduces the number of points the store is called in your app. It makes development much easier to manage and presents fewer opportunities to create a mess.

Answer 2

You don't have to use connect(), but your components will then become more tightly coupled with redux. If you have Height container and you can remove those redux store code from Height component and make it reusable easily on other non-redux project.

Answer 3

Using class as object-oriented pattern and some functional oriented patterns all mixed together makes a beautiful result. It's perfect if you want to practice your functional programming skills, but sadly, if you do so for a more serious application, you will loose a lot of benefits from react and redux. Things like state, your application will be hard to update. Your code will be coupled. and close to modifications. In a bigger application, you will find it frustrating developing it. I took the exact same path not long ago and I'm enjoying react and redux way more mixing both. This is my opinion. If you want to use connect, component state and most of the advantages of react and redux with keeping it fully functional, you can use React.createClass(), this is a function receiving an object with other function in it. Like instead of initializing the component state in the class constructor, you will use a function, getInitialState in this case. Containers are very useful to get reusable components. Another problem is passing redux props down to some components. With a small app, it's easy to pass those props not more than 3 level deep, but in a big app, it's not. Imagine, each time your redux state change, your whole app re-render and to avoid losing your data, you will have store those data in your redux state. You redux store will be too big and will contain useless data and data that shouldn't be there.
To sum up, that's perfectly fine to do a small app in full functional mode, but for a bigger app, you will loose to much react and redux benefits, making your app hard to modify and develop.

Answer 4

It is good to see some other peoples thoughts on this because I'm coming in new. But i gather from the other answers on this question that there are some performance optimisations that connect() takes care of and also it is good to not pass the whole store to a component because the react advanced context feature is unstable and also it couples the component to redux when using the redux store in the component.
I have gone over the tutorials some more and realised I can use connect() on my stateless component giving the benefits above.
Code:
const mapStateToProps = (state) => {
return {
height1: state.get('height').get('height1').toString(),
height2: state.get('height').get('height2').toString()
}
}
const mapDispatchToProps = (dispatch) => {
return {
updateHeight: (text, number) => {
dispatch(updateHeight(text, number))
}
}
}
let Height = (props) => {
return (
<View style={formStyles.container}>
<DimenInput
value={props.height1}
onChangeText={text => props.updateHeight(text, 1)}
/>
<Text style={formStyles.text}>{'&'}</Text>
<DimenInput
value={props.height2}
onChangeText={text => props.updateHeight(text, 2)}
/>
</View>
)
}
Height.propTypes = {
height1: React.PropTypes.string.isRequired,
height2: React.PropTypes.string.isRequired,
updateHeight: React.PropTypes.func.isRequired
}
Height = connect(
mapStateToProps,
mapDispatchToProps
)(Height)