Как получить доступ к состоянию из дочернего компонента? - PullRequest
Новая
       51

Как получить доступ к состоянию из дочернего компонента?

0 голосов
/ 27 октября 2019

Я пытаюсь использовать React Redux с React Native, и я изо всех сил пытаюсь заставить его работать должным образом.

Проверьте эту Экспо Снэк для демонстрации: https://snack.expo.io/@southdevondigital/sadistic-candies

КакВы можете видеть, что это просто базовое приложение с 3 экранами и несколькими встроенными кнопками навигации. Я настроил свое хранилище резервов и редуктор, но когда я пытаюсь получить доступ к состоянию из компонента, я получаю ошибку Cannot read property 'getState' of undefined (например, см. Экран «Настройки» в Snack).

Ответы [ 3 ]

0 голосов
/ 27 октября 2019

Используйте connect для подключения компонента к состоянию с mapStateToProps.

Redux заявляет, что вы 'map-to-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);
0 голосов
/ 27 октября 2019

Альтернативой connect() является использование крючков .

Если у вас есть магазин со структурой: 

{
  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;
0 голосов
/ 27 октября 2019

Как правило, если вы хотите получить доступ к хранилищу редуксов в компоненте React, вам нужно будет «подключить» его к хранилищу и отобразить в требуемом состоянии реквизиты: 

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.

...