如何从子组件访问状态？答案

【问题标题】：How do I access the state from a child component?如何从子组件访问状态？
【发布时间】：2019-10-27 18:23:41
【问题描述】：

我正在尝试将 React Redux 与 React Native 一起使用，但我正在努力让它正常工作。

查看这个 Expo Snack 以获取演示：https://snack.expo.io/@southdevondigital/sadistic-candies

正如您所见，它只是一个带有 3 个屏幕和一些内嵌导航按钮的基本应用。我已经设置了我的 redux 存储和 reducer，但是当我尝试从组件内访问状态时，我收到 Cannot read property 'getState' of undefined 错误（请参阅 Snack 中的设置屏幕以获取示例）。

【问题讨论】：

了解如何结合使用 react-redux 的 connect 函数和 mapStateToProps

标签： reactjs react-native redux react-redux state

【解决方案1】：

connect() 的替代方法是使用 hooks。

如果你有一个商店的结构：

{
  settings: {
    optionValue: 234
  }
}

然后你可以像这样在你的代码中访问它：

import React from "react";
import { useSelector } from "react-redux";

const MyComponent = () => {
  const optionValue = useSelector(state => state.settings.optionValue);

  return (
    <p>{optionValue}</p>
  );

}

export default MyComponent;

同样，您可以使用useDispatch 挂钩来更新状态：

import React from "react";
import { useSelector, useDispatch } from "react-redux";

const MyComponent = () => {
  const dispatch = useDispatch();
  const optionValue = useSelector(state => state.settings.optionValue);

  const handleClick = () => {
    const newValue = 123;
    dispatch({ type: 'UPDATE_VALUE', value: newValue });
  }

  return (
    <p>{optionValue}</p>
    <button onClick={handleClick} />
  );

}

export default MyComponent;

【讨论】：

【解决方案2】：

一般来说，如果你想在 React 组件中访问 redux 存储，你必须将它“连接”到存储并映射到你想要的 state props：

import React from "react";
import { connect } from "react-redux";

const MyComponent = props => {
  return <p>{props.somethingFromState}</p>;
}

const mapStateToProps = state => ({
  somethingFromState: state.something
});

export default connect(mapStateToProps)(MyComponent);

此时，文件的默认导出将是连接到您的 redux 存储的组件，该组件可以访问state.something。

【讨论】：

【解决方案3】：

使用connect 将组件连接到mapStateToProps 的状态。

Redux 声明您的“映射到道具”将通过您连接的组件道具可用

要更新 redux 状态，请使用同样通过第二个 arg 传递给组件 props 的操作创建器到 connect

您现在可以将Settings 转换为函数式组件：

import * as React from 'react';
import {connect} from 'react-redux';
import { Text, View } from 'react-native';

export default Settings = (props) => {
    const { value } = props;

    return (
      <View>
        <Text>
          This is the settings screen. I want to render a value from the state here: { value }
        </Text>
      </View>
    );
}
const mapStateToProps(state){
  return {
    value: state.value
  }
}

export default connect(mapStateToProps)(Settings)

你需要一个减速器：

export default const reducer = (state = '', action) => {
    switch (action.type) {
        case 'UPDATE_VALUE' :
            return action.payload
        case 'REMOVE_VALUE' :
            return ''
        default:
            return state
    }
}

您还需要一些动作创建者：

export const updateValue = (newValue) = {
    return {type: 'UPDATE_VALUE', payload:newValue}
}
export const removeValue = (newValue) = {
    return {type: 'REMOVE_VALUE'}
}

然后您可以使用这些动作创建者来更新状态：

import React from "react";
import { connect } from "react-redux";
import { Button } from 'react-native-paper';
import { updateValue , removeValue } from './actions'

const SomeComponent = props => {
  return(
        <div>
            <Button onPress={()=>props.updateValue(‘newValue’)}>Update</button>
            <Button onPress={()=>props.removeValue()}>Remove</button>
        </div>
  )
}

//set mapStateToProps arg to null if you do not need state
export default connect(null , {updateValue , removeValue})(SomeComponent);

【讨论】：