Skip to content

Instantly share code, notes, and snippets.

View LanciWeb's full-sized avatar

Marco Lancellotti LanciWeb

View GitHub Profile
@LanciWeb
LanciWeb / MyList.js
Last active November 28, 2020 16:28
Example of mapDispatchToProps
import React from 'react'
import {connect} from 'react-redux';
import {removeItem} from 'actions/itemsActions'; // -> export const deleteItem = (itemId) => ({type: 'DELETE_ITEM', payload: itemId});
export default class MyList extends Component {
render() {
return (
<div>
{this.props.list.map(i => (
@LanciWeb
LanciWeb / MyList.js
Last active November 28, 2020 16:30
Example of useSelector
import React from 'react';
import {useSelector} from 'react-redux';
const MyList = () => {
const list = useSelector(state => state.itemsList.items);
return (
<ul>
{props.list.map(i => <li key={i.id}>{i.name}</li>)}
</ul>
@LanciWeb
LanciWeb / ItemsList.js
Last active November 28, 2020 15:58
example of mapStateToProps
import React from 'react'
import {connect} from 'react-redux';
export default class MyList extends Component {
render() {
return (
<ul>
{this.props.list.map(i => <li key={i.id}>{i.name}</li>)}
</ul>
)
@LanciWeb
LanciWeb / index.js
Created November 28, 2020 15:20
providing the state to the entire app
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducers from './reducers'; // these are our combined reducers
const store = createStore(combinedReducers);
ReactDOM.render(
@LanciWeb
LanciWeb / index.js
Last active November 28, 2020 15:47
reducerCombiner.js
//in /reducer/index.js
import itemsReducer from './itemsReducer';
import usersReducer from './userReducer';
//...
import {combineReducer} from 'redux';
export default combineReducer({
itemsList: itemsReducer,
@LanciWeb
LanciWeb / itemsActions.js
Created November 28, 2020 14:49
An example of action creators
//example of action creators
export const addItem = (newItem) => ({type: 'ADD_ITEM', payload: newItem});
export const deleteItem = (itemId) => ({type: 'DELETE_ITEM', payload: itemId});
export const clearItems = () => ({type: 'CLEAR_ITEMS'});
@LanciWeb
LanciWeb / itemsReducer.js
Last active November 28, 2020 14:51
An example of reducer
//an ecample of reducer
export default (state, action) => {
const {type, payload} = action;
switch (type){
case 'ADD_ITEM':
return {...state, items: [...state.items, payload]};
case 'REMOVE_ITEM':
const filteredItems = state.items.filter(i => i.id !== payload);
return {...state, items: items};
@LanciWeb
LanciWeb / NotesEdit.js
Created October 16, 2020 16:08
NotesEdit.js for the Fastify + React Admin project on Medium
import React from 'react';
import { Edit, SimpleForm, TextInput } from 'react-admin';
const NotesEdit = (props) => {
return (
<Edit {...props}>
<SimpleForm>
<TextInput disabled source="id" />
<TextInput required source="text" />
</SimpleForm>
</Edit>
@LanciWeb
LanciWeb / NotesCreate.js
Created October 16, 2020 16:06
NotesCreate.js for the Fastify + React Admin project on Medium
import React from 'react';
import { Create, SimpleForm, TextInput } from 'react-admin';
const NotesCreate = (props) => {
return (
<Create {...props}>
<SimpleForm>
<TextInput source="text" required />
</SimpleForm>
</Create>
);
@LanciWeb
LanciWeb / NotesList.js
Created October 16, 2020 16:05
NotesList.js for the Fastify + React Admin project on Medium
import React from 'react';
import {
List,
Datagrid,
TextField,
EditButton,
DeleteButton,
} from 'react-admin';
const NotesList = (props) => {