React-Redux: как получить доступ к хранилищу в родительском компоненте?

Question

Итак, у меня есть приложение React Native и недавно добавленное в него Redux.

Теперь я застрял со следующей проблемой:

Есть дочерний компонент (ползунок числа, где вы можете установить значение высоты элемента), который вызывается родительским компонентом. Каждый раз, когда изменяется значение ползунка номера в дочернем компоненте, я хочу иметь console.log обновленного значения в родительском компоненте.

Следовательно, родительский компонент каким-то образом должен иметь доступ к хранилищу Redux, но я не могу понять, как это сделать. Я попытался преобразовать родительский компонент в компонент класса и вызвать store.getState();, но это только дает начальное значение хранилища и не обновляется вообще.

Итак, я вернулся к тому, что родительский компонент был функциональным компонентом, и реализовал желаемое поведение без Redux, но с функцией обратного вызова. Но для чего мне Redux, когда я им не пользуюсь? В будущем мне определенно понадобится Redux в этом проекте, и поэтому было бы здорово решить эту проблему, используя его.

Вот код без функции обратного вызова:

Parent.tsx

imports ...
import Child from '../../atoms/Child/Child';
import store from '../../../../index.js';

const Parent: React.FC<Props> = () => {

// console.log('store: ', store.getState()); 

  const renderChild= () => {
    return (
      <View>
        <Child></Child>
      </View>
    );
  };

  const dataArray = [{content: renderChild()}];

  return (
    <Accordion
      dataArray={dataArray}
    />
  );
};

export default Parent;



Child.tsx

imports ...
import {connect} from 'react-redux';

import {RootState} from '../../../rootReducer/rootReducer';
import {setHeight} from '../../../store/child/actions';
import {HeightState} from '../../../store/child/types';

type Props = {};

const Child: React.FC<Props> = () => {
  const [sliderValue, setSliderValue] = useState(65);

  useEffect(() => {
    setHeight({height: sliderValue});
  }, []);

  useEffect(() => {
    setHeight({height: sliderValue});
  }, [sliderValue]);

  return (
    <View>
      <Text>Height is {sliderValue} inches</Text>
      <Slider
        step={1}
        value={sliderValue}
        onValueChange={sliderValue => setSliderValue(sliderValue)}
      />
    </View>
  );
};

function mapStateToProps(state: RootState) {
  return {
    height: state.heightResult.height,
  };
}

const mapDispatchToProps = {
  setHeight,
};


export default connect(mapStateToProps, mapDispatchToProps)(Child);

Согласно Redux Devtools, хранилище обновлено правильно и работает нормально.

Не могли бы вы мне помочь?

Answer 1

Вам также необходимо подключить родителя к магазину. На данный момент ваш родитель не имеет представления о магазине и не имеет с ним отношения. В этом весь смысл избыточности, гибкости и масштабируемости состояния.

const Parent: React.FC<Props> = ({height}) => { 
  console.log('height', height);
};

const mapStateToProps = ({ heightResult: { height }}: RootState) => ({ height });

export default connect(mapStateToProps)(Parent);