LanciWeb

//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

//in /reducer/index.js

import itemsReducer from './itemsReducer';
import usersReducer from './userReducer';
//...

import  {combineReducer} from 'redux';

export default combineReducer({
  itemsList: itemsReducer,

LanciWeb

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

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

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

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

import React from 'react';
import {useSelector} from 'react-redux';

const MyList = () => {
  const dispatch = useDispatch();
  const list = useSelector(state => state.itemsList.items);
  
  return (
    <div>
        {props.list.map(i => (

LanciWeb

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, applyMiddleware } from 'redux'; //applyMiddleware comes from redux
import { Provider } from 'react-redux';
import reducers from './reducers'; 
import thunk from 'redux-thunk';

const store = createStore(combinedReducers, applyMiddleware(thunk)); //applyMuddleware adds thunk to the store

LanciWeb

export const fetchPosts = () => async (dispatch, getReduxStore) => {
  const posts = await fetch('/posts');
  
  // some other code...
  
  /* this will return the current store
  allowing us to make tests based on 
  current values if we need to */
  const store = getReduxStore(); 
  

LanciWeb

Tutorial Markdown

Headings

Gli headings si ottengono con il #. Più cancelletti inseriamo, più piccolo sara l'heading.

# Heading 1
## Heading 2
### Heading 3