Reactjs React Redux：如何访问父组件中的存储？

因此，我有一个React本机应用程序，最近在其中添加了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);

Parent.tsx
进口。。。
从“../../atoms/Child/Child”导入子项；
从“../../../../index.js”导入存储；
常量父项：React.FC=（）=>{
//log（'store:'，store.getState（））；
常量renderChild=（）=>{
返回(
);
};
const dataArray=[{content:renderChild（）}]；
返回(
);
};
导出默认父对象；
Child.tsx
进口。。。
从'react redux'导入{connect}；
从“../../../rootReducer/rootReducer”导入{RootState}；
从“../../../store/child/actions”导入{setHeight}；
从“../../../store/child/types”导入{HeightState}；
类型Props={}；
常量子项：React.FC=（）=>{
const[sliderValue，setSliderValue]=使用状态（65）；
useffect（（）=>{
setHeight（{height:sliderValue}）；
}, []);
useffect（（）=>{
setHeight（{height:sliderValue}）；
}，[sliderValue]）；
返回(
高度为{sliderValue}英寸
设置滑动值（滑动值）}
/>
);
};
函数MapStateTops（状态：RootState）{
返回{
高度：state.heightResult.height，
};
}
const mapDispatchToProps={
设定高度，
};
导出默认连接（MapStateTops、mapDispatchToProps）（子级）；

根据Redux开发工具，商店更新正确，运行良好

你能帮帮我吗
 您还需要将父级连接到存储。目前，你的父母对这家商店一无所知，也与之没有任何关系。这就是该州的redux、灵活性和可伸缩性的全部要点

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

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

export default connect(mapStateToProps)(Parent);

const父对象：React.FC=（{height}）=>{
控制台日志（“高度”，高度）；
};
const mapStateToProps=（{heightResult:{height}}:RootState）=>（{height}）；
导出默认连接（MapStateTops）（父级）；
您需要使用
连接
包装
家长
，并传递所需的道具（使用
MapStateTrops
）