Решено ReactJS + Redux this.props.action не является функцией

Question

решено:

Я решил это, стерев 'export' в компоненте Dashboard и удалив клавиши {} в App. js (где вызывается Dashboard). Спасибо, что помогли мне:)

Привет, я новичок ie в реаги + редуксе и, как говорится в заголовке, я пытаюсь подключить функцию действия к Компоненту, но получаю

TypeError : this.props.dashBrd не является функцией

Вот код

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import {dashBrd}  from "../../actions/dashboard";

export class Dashboard extends Component {

  static propTypes = {
    dashboard: PropTypes.array.isRequired,
    dashBrd: PropTypes.func.isRequired
  };
  componentDidMount() {
    this.props.dashBrd();
  }
  render() {
    return (
      <React.Fragment>
        <h2>Dashboard</h2>
        <table className="table table-striped">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Price</th>
              <th>Stock</th>
              <th />
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </React.Fragment>
    );
  }
}
const mapStateToProps = state => ({
  dashboard: state.dashboard
});
export default connect(mapStateToProps, { dashBrd })(Dashboard);

, а действие находится в другом файле

import axios from "axios";
import { GET_DASHBOARD } from "./types";
import { createMessage, returnError } from "./messages";
import { tokenConfig } from "./auth";

export const dashBrd= () => (dispatch) => {
  const token = JSON.stringify({ jwt: tokenConfig() });
  //Headers
  const config = {
    headers: {
      "Content-type": "application/json"
    }
  };
  axios
    .get("http://localhost:8080/dashboard", config, token)
    .then(res => {
      dispatch(createMessage("Success!"));
      dispatch({
        type: GET_DASHBOARD,
        payload: res.data
      });
    })
    .catch(err => {
      console.log(err);
      dispatch(returnError(err.data,400));

    });
};

Я перепробовал почти все , экспорт, импорт ... Но в файле он показывается как импортированный, но не переданный в реквизит Dashboard

РЕДАКТИРОВАТЬ: Этот код предназначен для страницы регистра, которая на самом деле работает хорошо.

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { register } from "../../actions/auth";
import { Redirect } from "react-router-dom";
class Register extends Component {
  static propTypes = {
    register: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool
  };
  state = {
    email: "",
    password: ""
  };

  onChange = e => this.setState({ [e.target.name]: e.target.value });

  onSubmit = e => {
    e.preventDefault();
    const { email, password } = this.state;
    this.props.register(email, password);
    this.setState({
      email: " ",
      password: " "
    });
  };

  render() {
    const { email, password } = this.state;
    if (this.props.isAuthenticated) {
      return <Redirect to="/dashboard" />;
    }
    return (
      <div className="loginBody">
        <form onSubmit={this.onSubmit}>
          <h2 style={{ color: "white" }}>Registro</h2>
          <div className="form-group">
            <label style={{ color: "white" }}>Email</label>
            <input
              className="form-control"
              type="email"
              name="email"
              onChange={this.onChange}
              value={email}
            />
          </div>
          <div className="form-group">
            <label style={{ color: "white" }}>Password</label>

            <input
              className="form-control"
              type="password"
              name="password"
              onChange={this.onChange}
              value={password}
            />
          </div>
          <div className="form-group"></div>
          <div className="form-group">
            <button type="submit" className="btnLogin">
              Enviar
            </button>
          </div>
        </form>
      </div>
    );
  }

}
const mapStateToProps = state =>({
  isAuthenticated: state.auth.isAuthenticated
})
export default connect(mapStateToProps,{register})(Register);

зарегистрировать действие

export const register = (email, password) => dispatch => {
  //Headers
  const config = {
    headers: {
      "Content-type": "application/json"
    }
  };
  //Request body
  const body = JSON.stringify({ email, password: password });
  axios
    .post("http://localhost:8080/register", body, config)
    .then(res => {
      dispatch({
        type: REGISTER_SUCCESS,
        payload: res.data
      });
    })
    .catch(err => {
      dispatch(returnError(err.response.data, err.response.status));
      dispatch({
        type: REGISTER_FAIL
      });
    });
};

Answer 1

Следующий код работает:

import axios from "axios";
import { GET_DASHBOARD } from "./types";
import { createMessage, returnError } from "./messages";
import { tokenConfig } from "./auth";

export const mapDispatchToProps = (dispatch) => ({
  dashBrd: () => {
    const token = JSON.stringify({ jwt: tokenConfig() });
    //Headers
    const config = {
      headers: {
        "Content-type": "application/json"
      }
    };
    axios
      .get("http://localhost:8080/dashboard", config, token)
      .then(res => {
        dispatch(createMessage("Success!"));
        dispatch({
          type: GET_DASHBOARD,
          payload: res.data
        });
      })
      .catch(err => {
        console.log(err);
        dispatch(returnError(err.data, 400));

      });
  }
})

И ваш компонент

import {mapDispatchToProps} from "../../actions/dashboard";

И последняя строка

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

Вы можете переименовать переменную так, как вам хочется. Надеюсь, это поможет.

Я предпочитаю способ, в котором mapStateToProps, export defaut connect..., помещается в тот же файл, что и mapDispatchToProps, его легче читать.