Map Dispatch to Props

PHOTO

Thu Nov 12 2020 23:54:08 GMT+0000 (UTC)

Saved by @bifrost #react.js

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

// change code below this line
const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: (message)=>{
            dispatch(addMessage(message))
        }
    }
}

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

REACTEUSE

@bifrost

REACTEUSE Material UI style snippet GRID material ui MATERIAL UI _ custom style Absolute path variable .env retrieve data firestore React class based component save state locally REACT Extract State Logic to Redux Use Provider to Connect Redux to React Map State to Props Map Dispatch to Props Connect Redux to React Connect Redux to the Messages App Extract Local State into Redux base app React redux How To Build Forms in React | DigitalOcean forms class based component How to handle multiple input field in react form with a single function? - GeeksforGeeks Class based component fonctional forms Collecting data from a wizard form - Gosha Arinich How to create multi-step forms in React? - DEV React-admin - Admin and Resource Components React Color Gradients create react app build serv 21 Performance Optimization Techniques for React Apps Snazzy Maps - Free Styles for Google Maps get value from localstorage react Code Example Local storage portfolio - EmailJS Material UI | Formik | Formik react-spring Shake - React Reveal React Anime Themes – ApexCharts.js React Router: Declarative Routing for React.js React Hook Form Production-Ready Animation Library for React | Framer Motion Production-Ready Animation Library for React | Framer Motion Toast notifications PWA Manifest Generator | SimiCart Axios interceptor

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

In normal JS
events are calling from child -> parent -> parent -> ... -> body

In react, if there are any manual event wired then those will be called first then the events added via react in child => parent manner

Configure useEffect

1) using [],  Only once when component is intially rendered
useEffect(() => {
  console.log('inside use effect')
}, [])

2) nothing, run at initial render and at every single re-render
useEffect(() => {
  console.log('inside use effect')
})

2)[selectedItem], everytime whenever the state of selectedItem changes
useEffect(() => {
  console.log('inside use effect')
}, [selectedItem])

3) [selectedItem > 2], everytime the condition matches
useEffect(() => {
  console.log('inside use effect')
}, [selectedItem > 2])

Типизация пропсов в стильных компонентах

border: ${(props: { error: boolean }) => (props.error ? '1px solid #F20D19' : '1px solid transparent')};

export const Img = styled.img<{ alt: string, src: string}>`
  margin-right: 15px;
`;

#react.js #sorting

Creating Sortable Tables With React — Smashing Magazine

const useSortableData = (items, config = null) => {
  const [sortConfig, setSortConfig] = React.useState(config);
  
  const sortedItems = React.useMemo(() => {
    let sortableItems = [...items];
    if (sortConfig !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [items, sortConfig]);

  const requestSort = key => {
    let direction = 'ascending';
    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
      direction = 'descending';
    }
    setSortConfig({ key, direction });
  }

  return { items: sortedItems, requestSort };
}

Open new window onclick reactJS

onClick={() => window.open(url, "_blank")}

gitignore react

### react ###
.DS_*
*.log
logs
**/*.backup.*
**/*.back.*

node_modules
bower_components

*.sublime*

psd
thumb
sketch

analytics helper full

const analyticsItemsHelper = (offer) => {
    if (offer.name.includes('Web Coins')) {
      offer.bonusItems.forEach((el) => {
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: el.itemId,
            item_name: el.itemName,
            context: offer.id,
            quantity: +el.itemQuantity,
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: +currentUser.webCoin,
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
      });
      rubyIsActive &&
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: 'web_currency_ruby',
            item_name: 'Ruby',
            context: offer.id,
            quantity: currencyQuantity('Ruby', offer),
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: +currentUser.ruby,
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
    } else if (offer.name.includes('Rubies')) {
      offer.bonusItems.forEach((el) => {
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: el.itemId,
            item_name: el.itemName,
            context: offer.id,
            quantity: +el.itemQuantity,
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: +currentUser.ruby + el.itemQuantity,
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
      });
      Titan.SendEvent({
        name: 'sys.game_transaction',
        parameters: {
          trans_type: 'reward_web_portal',
          trans_desc: 'redeem_promo_code',
          tournament_id: '',
          item_id: 'web_currency_web_coin',
          item_name: 'Web Coin',
          context: offer.id,
          quantity: currencyQuantity('Web Coin', offer),
          transaction_id: +transactionIdAnalytics,
          stage_id: '',
          gacha_pack: '',
          gacha_pack_name: '',
          battle_id: '',
          season_id: '',
          item_balance: +currentUser.webCoin,
          tickets: '',
          skin: '',
          is_sgss: '',
          is_female_ss: '',
          item_ev: '',
          reference_id: 'special_offers',
          discount_info: JSON.stringify({
            promo_id: promotionId,
            promo_code: input,
          }),
          alliance_id: currentUser?.factionId || '',
          alliance_name: currentUser?.factionName || '',
          league_level: currentUser?.leagueId || '',
          player_level: currentUser?.playerId || '',
          player_name: currentUser?.nickname || '',
        },
      });
    } else {
      offer.bonusItems.forEach((el) => {
        console.log(activeCurrencies, 'activeCurrencies');
        console.log(currentUser, 'currentUser');
        console.log(offer, 'offer');
        console.log(el.itemName, 'itemNameitemNameItemNameitemNameitemName')
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: el.itemId,
            item_name: el.itemName,
            context: offer.id,
            quantity: +el.itemQuantity,
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: '',
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
      });
      Titan.SendEvent({
        name: 'sys.game_transaction',
        parameters: {
          trans_type: 'reward_web_portal',
          trans_desc: 'redeem_promo_code',
          tournament_id: '',
          item_id: 'web_currency_web_coin',
          item_name: 'Web Coin',
          context: offer.id,
          quantity: currencyQuantity('Web Coin', offer),
          transaction_id: +transactionIdAnalytics,
          stage_id: '',
          gacha_pack: '',
          gacha_pack_name: '',
          battle_id: '',
          season_id: '',
          item_balance: +currentUser.webCoin,
          tickets: '',
          skin: '',
          is_sgss: '',
          is_female_ss: '',
          item_ev: '',
          reference_id: 'special_offers',
          discount_info: JSON.stringify({
            promo_id: promotionId,
            promo_code: input,
          }),
          alliance_id: currentUser?.factionId || '',
          alliance_name: currentUser?.factionName || '',
          league_level: currentUser?.leagueId || '',
          player_level: currentUser?.playerId || '',
          player_name: currentUser?.nickname || '',
        },
      });
      rubyIsActive &&
        Titan.SendEvent({
          name: 'sys.game_transaction',
          parameters: {
            trans_type: 'reward_web_portal',
            trans_desc: 'redeem_promo_code',
            tournament_id: '',
            item_id: 'web_currency_ruby',
            item_name: 'Ruby',
            context: offer.id,
            quantity: currencyQuantity('Ruby', offer),
            transaction_id: +transactionIdAnalytics,
            stage_id: '',
            gacha_pack: '',
            gacha_pack_name: '',
            battle_id: '',
            season_id: '',
            item_balance: +currentUser.ruby,
            tickets: '',
            skin: '',
            is_sgss: '',
            is_female_ss: '',
            item_ev: '',
            reference_id: 'special_offers',
            discount_info: JSON.stringify({
              promo_id: promotionId,
              promo_code: input,
            }),
            alliance_id: currentUser?.factionId || '',
            alliance_name: currentUser?.factionName || '',
            league_level: currentUser?.leagueId || '',
            player_level: currentUser?.playerId || '',
            player_name: currentUser?.nickname || '',
          },
        });
    }
  };

Logs out a user when access token expires

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object
 
const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }
 
    useEffect(()=>{
        const token = user?.token;
 
        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

#javascript #react.js

Manipulate data in an array / manipulate arrays

const array = [1, 2, 3, 4]

//remove the first element of the array
array.shift()

//add an element to the beginning of the array
array.unshift()

//remove the last element in an array
array.pop()

//add an element to the end of the array
array.push()

#javascript #react.js

navigator - get current location / position

navigator.geolocation.getCurrentPosition(showPosition);

#javascript #react.js

add / remove class name / attribute to html

let dog = document.querySelector("p .dog");
dog.classList.add("cat");
dog.classList.remove("<strong>dog</strong>");


//attribute
let weatherIconElement = document.querySelector("#weather-icon");
  weatherIconElement.setAttribute(
    "src",
    `http://www.openweathermap.org/img/wn/${response.data.weather[0].icon}@2x.png`
  );
  weatherIconElement.setAttribute("alt", response.data.weather[0].description);

#javascript #react.js

//Date

let now = new Date(); //will give you the full date
now.getMilliseconds();
now.getSeconds();
now.getMinutes();
now.getHours();
now.getDate(); // number date of month
now.getDay(); //day of the week 0=sunday
now.getMonth();//january = 0
now.getFullYear();

//example of getting the current date to show up as h2
let now = new Date();
let h2 = document.querySelector("h2");
let daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thurs", "Fri", "Sat"]
let date = now.getDate();
let day = daysOfWeek [now.getDay()];
let year = now.getFullYear();
let hours = now.getHours();
let minutes = now.getMinutes();
let monthsOfYear = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]
let month = monthsOfYear[now.getMonth()];

h2.innerHTML = `${day} ${month} ${date}, ${hours}:${minutes}, ${year}`;

#javascript #react.js

function return / function return with two conditions

function isCold(temperature) {
    return temperature <= 10;}

 if (isCold(10)) {
   alert("It is cold today");}
   else {
     alert("It is warm today");
   } 
//example two
function isWindy(speed, unit) {
  return speed  > 5 && unit === "metric";
};

#javascript #react.js

array - replacing, removing

//edit an array (this will change the array called "numbers" from [1,2,6,7] to [1, 2,8,7])

numbers[2] = 8

//remove from an array (from the beginning)

numbers.shift();

Browse more snippets >>