Собственно оба варианта корректны. Если рассматривать это в плане удобства использования, то второй вариант однозначно выигрывает. Один большой компонент будет разделен на несколько мелких, те еще на несколько, а те - еще. И вам будет проблематично перебрасывать каждый раз в параметры store.
Provider вызывается один раз в корневом компоненте. Далее же вы просто любой из компонентов подключаете к redux store:
import React, {Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
/* ваш компонент */
class MyComponent extends Component {
render() {
console.log(this.props);
return (<div></div>);
}
}
const mapStateToProps = (state) => {
return {
state
}
};
const mapDispatchesToProps = (dispatch) => {
return {
dispatch,
// это мы подключаем собственные actions
actions: bindActionCreators(actions, dispatch),
}
};
export default connect(mapStateToProps, mapDispatchesToProps)(MyComponent);