Question

我正在尝试将React Redux与React Native一起使用，并且正在努力使其正常工作。

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

如您所见，它只是一个具有3个屏幕和一些内置导航按钮的基本应用程序。我已经设置了redux存储和reducer，但是当我尝试从组件内部访问状态时，出现Cannot read property 'getState' of undefined错误（有关示例，请参见Snack中的Settings屏幕）。

Answer 1

通常，如果您想访问React组件中的redux商店，则必须将其“连接”到商店并以所需的状态道具进行映射：

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);

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

Answer 2

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

Redux表示您可以通过连接的组件props获得“映射到props”

要更新redux状态，请使用动作创建者，这些动作创建者也通过第二个arg传递到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);

Answer 3

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;

如何从子组件访问状态？

3 个答案: