Logi c в компоненте или mapStateToProps

Question

Если MyComponent получает данные из хранилища избыточных данных, но каким-то образом организует их, прежде чем отобразить их, следует ли эту организацию выполнять в компоненте или функции 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

Здравствуйте, хорошего дня.

я думаю, что лучше иметь файл со всеми логиками c для соединения с 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.