React-Redux setup with toolkit

PHOTO

Thu May 16 2024 09:02:59 GMT+0000 (Coordinated Universal Time)

Saved by @eziokittu #react.js #redux #redux-toolkit

// main.jsx --- change the provider
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'
import store from './store/store.jsx'

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

// App.jsx --- call the reducer functions using useDispatch and useSelector
import React, {useState} from "react";
import { useDispatch, useSelector } from "react-redux";
import { incrementNum, decrementNum } from "./store/slices/NumberSlice";

function App() {
  const [count, setCount] = useState(0);

  const numsData = useSelector((state) => {
    return state.nums;
  })
  const dispatch = useDispatch();

  const handleNumIncrement = () => {
    dispatch(incrementNum(1));
  }
  const handleNumDecrement = () => {
    dispatch(decrementNum(1));
  }

  return (
    <div className="bg-stone-700 h-screen flex">
      <div className="mx-auto my-auto flex flex-col text-center space-y-4">
        
        {/* Title */}
        <div className="text-slate-50 font-bold text-4xl">Increment / Decrement Counter</div>

        {/* Body */}
        <div className="text-slate-300 text-2xl">This is a simple app for understanding the use of react redux</div>

        {/* Counter */}
        <div className="flex flex-row space-x-2 mx-auto border-2 border-stone-900 rounded-xl bg-stone-200">
          <button 
            onClick={handleNumIncrement}
            // onClick={()=>(setCount(prev => prev+1))}
            className="px-4 py-2 bg-stone-200 hover:bg-stone-400 text-stone-900 rounded-l-xl text-[56px] w-[70px]"
          >+</button>
          <div
            className="px-4 py-2 my-2 w-[100px] text-[48px] rounded-xl bg-stone-500"
          >{numsData}</div>
          {/* >{count}</div> */}
          <button 
            onClick={handleNumDecrement}
            // onClick={()=>(setCount(prev => prev-1))}
            className="px-4 py-2 bg-stone-200 hover:bg-stone-400 text-stone-900 rounded-r-xl text-[56px] w-[70px]"
          >-</button>
        </div>
      </div>
    </div>
  );
};

export default App;

// NumberSlice.jsx --- creating the slices where the reducers are defined
import { createSlice} from '@reduxjs/toolkit';

const numberSlice = createSlice({
    name: 'num',
    initialState: 0,
    reducers: {
        incrementNum(state, action){
            return state + action.payload;
            // state.push(action.payload) // if state was an array
        },
        decrementNum(state, action){
            return state - action.payload;
        },
    }
})

console.log(numberSlice);

export default numberSlice.reducer;
export const { incrementNum, decrementNum } = numberSlice.actions;

// store.jsx --- saving the store of redux of all the slices
import { configureStore } from "@reduxjs/toolkit";
import numberSlice from "./slices/NumberSlice";

const store = configureStore({
    reducer: {
        nums: numberSlice,
    },
});

export default store;


// File and Folder Structure
root
main.jsx
App.jsx
store -> slices -> NumberSlice.jsx
store -> store.jsx

https://redux-toolkit.js.org/tutorials/quick-start

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

React Help

@eziokittu

React pass parameter from child --> parent React Pagination Client and Server side form input validation React-Redux setup with toolkit

#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])

##javascript ##js #next.js #react.js

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

#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 };
}

React Color Gradients

https://codepen.io/marcobiedermann/pen/WNGWzYR

#react.js #javascript #checkboxtoggle

javascript - How to toggle boolean state of react component? - Stack Overflow

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

#javascript #react.js

lowercase, uppercase, remove spaces ( trim ) , capitalize first letter

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

Open new window onclick reactJS

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

Определяет клик вне компонента

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

useWorker | useWorker

https://useworker.js.org/

React JSX Iterating a List/Array

this.state = {
	zombies:[
    {
    	name: 'Zombie'
    },{
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    }
    ]
}

render() {
	return (
    	<div>
        {
        	this.state.zombies.map(zombie => <h1>{zombie.name}</h1>)
        }
        
        </div>
    )
}

#javascript #react.js

Hooks at a Glance – React

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);


  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

#javascript #react.js

loop in react jsx

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

////////// or:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Material UI style snippet

const useStyles = makeStyles((theme) => ({}));

GRID material ui

<Grid container><Grid item></Grid></Grid>

MATERIAL UI _ custom style

import { createMuiTheme } from '@material-ui/core/styles';

// A custom theme for this app
const theme = createMuiTheme({});

export default theme;

Browse more snippets >>