Реагировать на избыточный mapStateToProps - не могу получить доступ к состоянию в качестве реквизита

Question

Очень плохо реагирует и редуцирует и не может понять, почему я не могу получить доступ к состоянию через this.props в функциональном компоненте.

Store

Я создаю начальное состояние для вращения и передать его в мой магазин при создании.

import { createStore } from "redux";
import rotateReducer from "../reducers/rotateReducer";

const initialState = { rotating: true }

const store = createStore(rotateReducer, initialState)

export default store;

Редуктор

Функция для изменения состояния вращения.

export default (state,action) => {
    if (action.type === "rotate") {
        return { rotating: action.payload }
    }
    return state;
}

Указатель. js

Здесь я импортирую хранилище и провайдера и упаковываю компонент приложения, передаваемый в хранилище, в качестве реквизита.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import  store  from "./store/store";

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

приложение . js

Основной компонент, в который я пытаюсь загрузить реквизиты, но продолжаю получать сообщение «Не могу прочитать свойство« реквизиты »из неопределенного» * ​​1028 *

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from "react-redux";
import { startAction } from "./actions/startAction";
import { stopAction } from "./actions/stopAction";

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <img 
          src={logo} 
          className={
            "App-logo" + 
            (this.props.rotating ? "":" App-logo-paused")
          } 
          alt="logo" 
          onClick={
            this.props.rotating ? 
              this.props.stopAction : this.props.startAction
          }
        />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

const mapStateToProps = state => ({
  ...state
});


const mapDispatchToProps = dispatch => {
  return {
    startAction: () => dispatch(startAction),
    stopAction: () => dispatch(stopAction)
  }

}
export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

Вы должны поставить реквизиты в качестве параметра:

function App(props) {
  console.log(props)

  return(/* .... */)
}

Попробуйте это и проверьте вывод консоли. (this.props будет работать в компоненте класса, но я предпочитаю использовать компоненты функций)

Обычно я добавляю только те части состояния, которые мне нужны:

function mapStateToProps(state) {
  return {
    rotating: state.rotating
  }
}

И затем:

function App({rotating, /* more variables */}) {
  console.log(rotating)

  return(/* .... */)
}