useSelector useDispatcher React Example

useSelector useDispatcher - React Example

We can use useSelector and useDispatcher instead of using connect().

import React, { useEffect } from 'react';

import { useSelector, useDispatch } from "react-redux";

import './App.css';

import {dataAction} from './actions/getDataAction';

function App() {

  

  const data = useSelector(state => state.dataReducer);

  const dispatch = useDispatch();

  useEffect(() => {

    dispatch(dataAction())

  });

  return (

    <div className="App">

      <header className="App-header">

        <h1>{data}</h1>

      </header>

    </div>

  );

}

export default App;

Please find github project - https://github.com/codingtechlife/useSelector_useDispatcher_example

Facebook like skeleton loader in React

Facebook like skeleton loader in React

You have noticed the loader displayed in facebook and other new websites when content is loading. The loader can be implemented in react application using  react-content-loader

demo:  https://danilowoz.com/create-content-loader/

To install:

npm i react-content-loader --save

yarn add react-content-loader

Usage: 

1. Preset Example 

import ContentLoader, { Facebook } from "react-content-loader";

const MyLoader = () => <ContentLoader />;

const MyFacebookLoader = () => <Facebook />;

2. Custom

import React from "react";

import ContentLoader from "react-content-loader";

const CustomLoader = () => (

  <div style={{ width: "100%", minHeight: "500px" }}>

    <ContentLoader style={{ width: "100%", height: "500px" }}>

      <rect x="65%" y="0" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="40" rx="5" ry="5" width="100%" height="40" />

      <rect x="10" y="100" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="150" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="200" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="250" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="300" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="350" rx="5" ry="5" width="100%" height="30" />

      <rect x="10" y="400" rx="5" ry="5" width="100%" height="30" />

      <rect x="75%" y="450" rx="5" ry="5" width="100%" height="30" />

    </ContentLoader>

  </div>

);

export default CustomLoader;

Note: I have faced issue in providing 100% width for the loader. The above code fixed issue and take 100% width of the container.