Tutorials‎ > ‎

React hot reload & Redux (Part 2)

posted Dec 5, 2016, 1:59 AM by Andi Muqsith Ashari   [ updated Dec 5, 2016, 6:56 PM by Surya Wang ]

This is the second part of React hot reload & Redux, in this part we will learn about how to update and deleting product item that inserted using code we have built in the first tutorial, the first thing is modifying actions/index.js by adding updateProduct and deleteProduct method as action:

export const ADD_PRODUCT = 'ADD_PRODUCT';
export const UPDATE_PRODUCT = 'UPDATE_PRODUCT';
export const DELETE_PRODUCT = 'DELETE_PRODUCT';

let nextProductId = 1;

export function addProduct(product)
{
product.id = nextProductId++; 
    return {
        type: ADD_PRODUCT,
        product: product
    };
}

export function updateProduct(product){
return {
type : UPDATE_PRODUCT, 
product: product
}
}

export function deleteProduct(product){
return {
type : DELETE_PRODUCT,
product : product
}
}

Now we have 3 actions, addProduct, updateProduct, and deleteProduct, the next step is creating update and delete reducer by modifying reducer/products.js:

import { ADD_PRODUCT, UPDATE_PRODUCT, DELETE_PRODUCT } from '../actions';

const initialState = {
    products: []
};

export function crudApp(state = initialState, action) {

    switch(action.type)
    {

        case ADD_PRODUCT: {
            return Object.assign({}, state, {
                products: [
                    ...state.products,
                    action.product
                ]
            });
        }

        case UPDATE_PRODUCT:{
            state.products.forEach(function(val,key){
                if(action.product.id==val.id){
                    state.products[key] = action.product;
                }
            });
            return Object.assign({}, state, {
                products: [
                    ...state.products
                ]
            });
        }

        case DELETE_PRODUCT: {
            state.products.forEach(function(val,key){
                if(action.product.id==val.id){
                    state.products.splice(key,1);
                }
            });
            return Object.assign({}, state, {
                products: [
                    ...state.products
                ]
            });
        }

    }

    return state;
}

Our actions and reducers are ready to use, the last thing is importing our new action into our react component and use them as a functionality of our application (Insert, Update and Delete):

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import { crudApp } from './reducers/products';
import { addProduct, updateProduct, deleteProduct } from './actions';

var store = createStore(crudApp);

class App extends React.Component {

    constructor(){
        super();
        this.state = {
            products: [],
            product: {
                id : '',
                name : '',
                description : ''
            }
        };
    }

    componentWillMount(){
        store.subscribe(() => {
            var state = store.getState();
            this.setState({
                products: state.products
            });
        });
    }

    handleSubmitForm(e)
    {
        e.preventDefault();
        if(this.state.product.id){
            store.dispatch(updateProduct(this.state.product));
        }else{
            store.dispatch(addProduct(this.state.product));
        }
        this.setState({
            product:{
                id:'',
                name:'',
                description:''
            }
        });
    }

    handleSelectProduct(product,e){
        this.setState({
            product:product
        });
    }

    handleDeleteProduct(product,e){
        store.dispatch(deleteProduct(product));
        this.setState({
            product:{
                id:'',
                name:'',
                description:''
            }
        });
    }

    handleProductNameChange(e){
        this.setState({
            product: {
                id : this.state.product.id,
                name : e.target.value,
                description:this.state.product.description
            },
        });
    }

    handleProductDescriptionChange(e){
        this.setState({
            product: {
                id : this.state.product.id,
                name:this.state.product.name,
                description : e.target.value
            },
        });
    }

    handleProductIdChange(e){
        this.setState({
            product: {
                id : e.target.value,
                name:this.state.product.name,
                description : this.state.product.description
            },
        });
    }   

    render () {

        var mode = "Add Product";
        if(this.state.product.id) mode = "Update Product";

        return(
            <div>
                <p>HMR is cool</p>
                <form onSubmit={this.handleSubmitForm.bind(this)}>
                    <table>
                        <tbody>
                            <tr>
                                <td>Product Id</td>
                                <td><input value={this.state.product.id} disabled="disabled" type="text" onChange={this.handleProductIdChange.bind(this)}/></td>
                            </tr>
                            <tr>
                                <td>Product Name</td>
                                <td><input value={this.state.product.name} type="text" onChange={this.handleProductNameChange.bind(this)}/></td>
                            </tr>
                            <tr>
                                <td>Product Description</td>
                                <td><input value={this.state.product.description} type="text" onChange={this.handleProductDescriptionChange.bind(this)}/></td>
                            </tr>
                        </tbody>
                    </table>
                    <input type="submit" value={mode}/>
                </form>
                <hr />
                <table width="500">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    {
                        this.state.products.map((product,i)=>{
                            return (
                                <tr key={i}>
                                    <td>{product.id}</td>
                                    <td>{product.name}</td>
                                    <td>{product.description}</td>
                                    <td>
                                        <button onClick={this.handleSelectProduct.bind(this,product)}>Select</button>
                                        <button onClick={this.handleDeleteProduct.bind(this,product)}>Delete</button>
                                    </td>
                                </tr>
                            )
                        })
                    }
                    </tbody>
                </table>
            </div>
        );
    }
};

render(<App/>, document.getElementById('app'));

module.hot.accept();

Now we can inserting, viewing, updating, and deleting our data by using our simple React & Redux application.


ċ
react-redux-part-2.zip
(3k)
Andi Muqsith Ashari,
Dec 5, 2016, 1:59 AM
Comments