组件或映射StateToProps中的逻辑

Question

如果MyComponent从redux存储中获取数据，但在映射之前先以某种方式组织它，那么应该在组件或mapStateToProps函数中进行组织吗？为什么？

const MyComponent = ({ data }) => {
// IN HERE?
return (
<div>
{data.map((d) => (...))}
</div>
);
};
const mapStateToProps = (state) => {
const output = state.data
// OR HERE?
return { data: output };
};
export default connect(mapStateToProps)(MyComponent);

Answer 1

你好，祝你今天愉快。

我认为最好有一个包含所有逻辑的文件来连接redux，所以每次我需要连接redux时，我都会创建一个名为ComponentNameContainer.jsx的文件，这个文件看起来像这样：

import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import Row from '../components/Row';
import {doSomething} from '../redux/somethingActions'
// here the imports of function from your actions
export default withRouter(connect(
(state, ownProps) => {
return {
// props that u need from redux
// example: state.sessionReducer.user
}
},
{
// functions that u need from redux 
//example: doSomething
}
)(Row))

我有一个文件夹调用容器来存储所有的容器文件，以跟踪与redux连接的组件。