How to used it with redux.

[TheSwordBreaker]

I am using redux and react-hooks.

I have takein reference of issues of function components of this repo already.

I am stuck at this stage.

I want to alert my notification when my error state is changed. I was thinking of calling myfunc in setErros actions.
but then i have to somehow export myfunc from dashboard component where i have write the code.
is there is any other way.

alert.js (action)

import {http,catchasync} from './http'

export const setErrors = (Message) => catchasync( async (dispatch) => {
  dispatch({type:'SET_ERRORS',payload:Message} );

})

export const setSuccess = (Message) => catchasync( async (dispatch) => {
  // dispatch({type:'SET_SUCCESSS',payload:Message} );
})

DashBoard.js (comp)

import React,{useRef,useEffect} from 'react'
import PropTypes from 'prop-types'
import SideBar from '../components/SideBar'
import AdminNavbar from '../components/AdminNavbar'
import routes from '../utils/routes'
import AdminFooter from '../components/AdminFooter'
import { useDispatch,useSelector } from 'react-redux'
import { setErrors } from '../actions/alerts';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect
} from "react-router-dom";

import { Container } from 'reactstrap';

import argonreact from "../assets/img/brand/argon-react.png";
import NotificationAlert from "react-notification-alert";
import "react-notification-alert/dist/animate.css";

function DashBoard(props) {
  const getRoutes = routes => routes.map(
    (prop, key) =>        
        <Route
          path={'/dashboard' + prop.path}
          exact={prop.exact || false}
          // component={prop.component}
          children={<prop.display />}
          key={key}
        />
      );
      


  // const getBrandText = path => {
  //   for (let i = 0; i < routes.length; i++) {
  //     if (
  //       props.location.pathname.indexOf(
  //         routes[i].layout + routes[i].path
  //       ) !== -1
  //     ) {
  //       return routes[i].name;
  //     }
  //   }
  //   return "Brand";
  // };

  const dispatch = useDispatch();
  const alert = useSelector(state =>{ 
    console.log(state)
    return state.alert})
  
  const notifyEl = useRef(null);

  const myFunc = () => {
    notifyEl.current.notificationAlert(options);
  }
  useEffect(() => {
    // dispatch(setErrors("Hiii"));
    console.log(alert)
    // async function fetchData() {
    //   const { data:api } = await axios.get('/events')
    //   console.log(api.data.paginatedData)
    //   setRows(api.data.paginatedData)
    // }
    // fetchData()
  }, [alert])
  // useEffect(() => {
  //   myFunc()
    
  //   // async function fetchData() {
  //   //   const { data:api } = await axios.get('/events')
  //   //   console.log(api.data.paginatedData)
  //   //   setRows(api.data.paginatedData)
  //   // }
  //   // fetchData()
  // }, [alert])

  var options;
  options = {
    place: 'tr',
    message: (
      <div className="alert-text">
        <span className="alert-title" data-notify="title">
          {JSON.stringify(alert)}
          {alert.msg}
          
        </span>
        <span data-notify="message">
          {/* Turning stan  dard Bootstrap alerts into awesome notifications */}
        </span>
      </div>
    ),
    type: 'warning',
    icon: "ni ni-bell-55",
    autoDismiss: 7
  }
  return (
    <>
    <SideBar 
      routes={routes}
      logo={{
        innerLink: "/dashboard",
        imgSrc: argonreact,
        imgAlt: "..."
      }}
    />



    <div className="main-content" >
      <AdminNavbar brandText="Sap" />
      <NotificationAlert ref={notifyEl} />

      <Switch>
        {getRoutes(routes)}
        {/* <Redirect from="*" to="/admin/index" /> */}
      </Switch>
      <Container fluid>
        <AdminFooter />
      </Container>
      </div>
    </>
  )
}

DashBoard.propTypes = {

}

export default DashBoard

[TheSwordBreaker]

this is my first time making issue. pls let me know if i did something wrong in code or making issue.

[wangfei0001]

I don't think this component can be used with react-redux