Состояние пусто при использовании mapStateToProps - PullRequest
Новая
       27

Состояние пусто при использовании mapStateToProps

1 голос
/ 14 марта 2020

Состояние пусто, когда я пытаюсь сопоставить состояние из магазина со свойствами компонента. Я пытаюсь получить значение строки, отображаемой в JSX, но она отсутствует. Я не могу получить что-либо для отображения в магазине приставок.

Редуктор: 

const initialState = {
    visibles: "false",
    error: null,
    text: ""
  };

  const rootReducer = (
    state = initialState,
    action
  )  => {
    switch (action.type) {
      case "OPEN_MODAL":
        return {
          ...state,
          visibles: "true",
          error: null
        };

      default:
        return state;
    }
  }

  export default rootReducer;

и индекс. js

import {createStore } from "redux";
import {Provider } from "react-redux";
import rootReducer from "./components/Redux/Reducer";

const store = createStore(rootReducer);

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

потребитель магазина притока 


import React, { Component } from 'react'
import {connect} from "react-redux";
import styles from "./modal.module.css";


export class Modal extends Component {
    render() {
        console.log(this.props)

        return (

            <div className={styles.root}>
                <p className={styles.title}>{this.props.visible}</p>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        visible: state.visibles
    }
}

export default connect(mapStateToProps)(Modal)

1 Ответ

0 голосов
/ 14 марта 2020

Нашел причину почему. Мне пришлось провести рефакторинг класса Modal, чтобы он не использовал «класс экспорта», и тогда я мог получить состояние из хранилища с помощью connect. 

class Modal extends React.Component {
render() {
    console.log(this.props)

    return (

        <div className={styles.root}>
            <p className={styles.title}>{this.props.visible}</p>
        </div>
    )
}}
...