Как размножить один и тот же stateless компонент, что бы у каждого был автономный state. Речь о библиотеке recompose?

Question

[sinevik]

Вопрос к специалиста по React.js

есть stateless компонент

import { connect } from 'react-redux';
import {
  compose,
  withState,
  withHandlers,
} from 'recompose';
import PropTypes from 'prop-types';
import ColumnPresentation from './ColumnPresentation';
import { setPlayerStep, setWinner } from '../GameState';


export default compose(
  connect(
    state => ({
      playerStep: state.game.playerStep,
      winner: state.game.winner,
    }),
    dispatch => ({
      setPlayerStep: () => dispatch(setPlayerStep()),
      setWinner: winner => dispatch(setWinner(winner)),
    }),
  ),
  withState('count', 'setCount', 0),
  withState('arrayFiller', 'setArrayFiller', [...Array(6)]),
  withHandlers({
    incrementCount: props => () => {
      props.setCount(props.count + 1);
    },
  }),
)(ColumnPresentation);

import React from 'react';
import Cell from '../../../components/Cell';


function columnPresentation({
  arrayFiller,
  incrementCount,
}) {
  return (
    <div>
      <div
        onClick={incrementCount}
        style={{ flexDirection: 'column', display: 'inline-block' }}
        role="button"
        tabIndex={0}
      >
        <p>Hello</p>
      </div>
    </div>
  );
}


export default columnPresentation;

Как теперь этот компонент размножить:

import React from 'react';
import ColumnPresentation from '../column/ColumnPresentationContainer';

function homePresentation() {
  return (
    <div style={styles.container}>
      <ColumnPresentation />
      <ColumnPresentation />
    </div>
  );
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
};

export default homePresentation;

Что был каждого был свой state, независимый от других? У меня при клике на один, почему то меняется state второго компонента

Answer 1

[Dmitry Alekseev]

Ну все логично, state-то общий. Хорошо было бы перенести этот код в песочницу, но я все же подскажу, навскидку. В своей работе я писал независимый компонент, который рисовал, какое-то дерево. Он был с redux и проблема возникла в том момент, когда возникла необходимость использовать несколько этих компонентов на одной странице. Store создается, фактически, при импорте компонента ведь он обернут в Provider и, сколько бы их не было, store для всех будет общий. Решением было в в функцию экспорта компонента добавить генерацию uuid который передавался в метод создания store и данные хранились по конкретному uuid и забирались оттуда же.

Я могу помочь описать это, но перенеси код в песочницу.