使用 mapStateToProps 时状态为空

Question

当我尝试将状态从商店映射到组件的属性时，状态为空。我尝试获取在 JSX 中显示的字符串的值，但它丢失了。我无法从 redux 商店中获取任何显示内容。

减速器：

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;

和index.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'));

redux 存储的消费者


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)

Answer 1

找到原因了。我不得不重构 Modal class 以不使用 "export class" 然后我可以使用连接从商店获取状态。

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

    return (

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

使用 mapStateToProps 时状态为空

State is empty when using mapStateToProps

state

store

reactjs

redux