Cara Membuat Counter di React js dengan React Redux

Hallo guys, kali ini saya akan mempraktikan cara bagaimana cara membuat counter di  react js menggunakan react redux. Jika kalian sudah bisa membuat counter sebelumnya tanpa menggunakan react redux, disini saya akan mempraktikan menggunakan redux. Untuk hasil akhir nya bisa di lihat seperti pada gambar berikut ini.

Untuk membuat Counter di react js menggunakan redux cukup mudah. Ada 3 poin penting dalam  redux yang perlu di pahami :

• Store
• Reducer
• Action

Untuk pengertian secara mendetail tidak saya jelaskan pada tutorial ini. Kalian bisa memahami nya terlebih dahulu. Oke mari kita praktikan langsung dan ikuti langkah2 di bawah ini.

install depedency react redux

  npm install react-redux redux

kemudian buat file reducer.

Reducer : counterreduser.js

import CounterContainer from "../CounterContainer";

const intialState = {
    component:[]
}
export  default  function counter(state=intialState,action) {
    console.log(state,action)

    switch (action.type) {
        case 'ADD_ELEMENT':
                    return {...state, component : state.component.concat([0])};
        case 'INCREMENT':
                return {...state, component : state.component.map((element,index)=>{
                if (index===action.index){==
                    return element +   1
                 }else {
                     return element
                 }
             })}
        case 'DECREMENT':
            return {...state, component : state.component.map((element,index)=>{
                    if (index===action.index){
                        return element -1
                    }else {
                        return element
                    }
                })}
        default:return state;
    }
}

Kemudian setelah membuat reducer kita tambahkan store di file index.js.

store: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import CounterContainer from "./counter/CounterContainer";
import counter from "./counter/reducer/CounterReducer";
import {createStore} from "redux";
import {Provider} from "react-redux";

ReactDOM.render(
    <Provider store={createStore(counter)} >
    <CounterContainer /></Provider>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

setelah menambahkan reducer dan store saatnya kita membuat action.

action : CounterContainer.js

import React from 'react';
import '../materialize.min.css'
import {connect} from "react-redux"
class CounterContainer extends React.Component {
    render() {
        const incrementAction = {type:"INCREMENT"}
        const decremnetrAction = {type:"DECREMENT"}
        const addElemenAction = {type:"ADD_ELEMENT"}
        return (
            <div className="custom-row">
                <button onClick={()=>{this.props.dispatch(addElemenAction)}}> Tambah Counter</button>
                {this.props.component.map((element ,index )=>{
                    return <div className="card-panel teal">
                        <button onClick={()=>{this.props.dispatch({...incrementAction, index : index})}} >plus</button>
                        <h1>{element}</h1>
                        <button onClick={()=>{this.props.dispatch({...decremnetrAction, index : index})}} >min</button>
                    </div>
                })}
            </div>
        );
    }
}
const mapStateToProps=(state)=>{
    return {component: state.component}
}
export default connect(mapStateToProps)(CounterContainer);

Selesai.. cukup mudah bukan selamat mencoba ^-^

Share this post