The Most Minimal React-Redux

minimal-redux.md

The Most Minimal React-Redux

Redux ဟာ လေ့လာသူတိုင်းကို ခေါင်းမူးစေတဲ့ နည်းပညာတစ်ခုပါ။ ဒီလောက်ကြီး ခက်လှလို့မဟုတ်ပါဘူး။ သူသုံးထားတဲ့ နည်းစနစ်တွေကြောင့် လူတွေကို မျက်စိလည်စေတာပါ။ ဒီတော့ ရသလိုလို မရသလိုလိုတွေဖြစ်ပြီး စိတ်ညစ်ကုန်ကြရော။ ဒီနေရာမှာ အခြေခံအကျဆုံးနဲ့ အရှင်းဆုံး Redux ကုဒ်နမူနာကို ဖော်ပြပေးပါမယ်။ ရှုပ်ထွေးတဲ့ နည်းပညာတွေ ပါဝင်မှာ မဟုတ်ပေမယ့် ကုဒ်ရဲ့ဖွဲ့စည်းပုံ ဆန်းပြားလို့ Programming အမြင် အတော်လေးရှိဖို့ လိုအပ်နိုင်ပါတယ်။ ဒီထက်ရှင်းအောင်တော့ ရေးပြလို့ ရနိုင်တော့မှာ မဟုတ်ပါဘူး။

လက်တွေ့ စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဦးဆုံး Project ဖိုဒါတစ်ခုဆောက်ပြီး အထဲမှာ Redux ကို Install လုပ်လိုက်ပါ။

npm install redux --save

ပြီးရင် index.js အမည်နဲ့ ဒီကုဒ်ကို ကူးယူစမ်းသပ်ကြည့်ပါ။

var createStore = require('redux').createStore;

var store = createStore(function(state=[], action) {
    if(action.type == 'add') {
        return [
            action.data,
            ...state
        ];
    }

    return state;
});

store.subscribe(function(state) {
    console.log(store.getState());
});

store.dispatch({type: 'add', data: 'Apple'});
store.dispatch({type: 'add', data: 'Orange'});

Redux ရဲ့ createStore ကိုသုံးပြီး အချက်အလက်တွေ သိမ်းလို့ရနိုင်တဲ့ store ကိုတည်ဆောက်ပါတယ်။ ဒီလိုတည်ဆောက်ရာမှာ Callback Function တစ်ခုကို Parameter အဖြစ်ပေးရပါတယ်။ Redux ကတော့ ဒီ Function ကို Reducer လို့ခေါ်ပါတယ်။ နမူနာမှာ state အဖြစ် Array အလွတ်တစ်ခုကို Default ပေးထားပြီး action.type က add ဖြစ်ခဲ့ရင် action.data ကို အဲ့ဒီ Array ထဲမှာ ပေါင်းထည့်ပေးဖို့ ပြောထားတာပါ။

ခပ်ရိုးရိုး ရေးမယ်ဆိုရင် state.push(action.data) ဖြစ်မှာပါ။ ဒါပေမယ့် Redux က Functional Programming မူတွေကို သုံးထားလို့ တစ်ခုခု အပြောင်းအလဲ လုပ်တဲ့အခါ မူလအချက်အလက်တွေကို မပြောင်းလဲစေပဲ၊ လိုချင်တဲ့ အပြောင်းအလဲ ပါဝင်တဲ့ ရလဒ်အသစ်ကိုသာ ဖန်တီးစေတဲ့အတွက် ဖြစ်ပါတယ်။

ပြီးတဲ့အခါ subscribe() ကိုသုံးပြီး store မှာအပြောင်းအလဲရှိတိုင်း Data တွေကို Console မှာ ရိုက်ထုတ်ပေးဖို့ သတ်မှတ်ထားပါတယ်။

store မှာ အပြောင်းအလဲ ဖြစ်စေလိုရင် dispatch() ကို သုံးရပါတယ်။ နမူနာအရ ပထမ dispatch အတွက် type: 'add' နဲ့ data: 'Apple' ကိုပေးထားပါတယ်။ Reducer မှာ ကြိုတင်သတ်မှတ်ထားပြီးဖြစ်လို့ ဒီ အချက်အလက်ကို လက်ခံရရှိတဲ့အခါ Store ထဲကို Apple ရောက်သွားမှာပါ။ ဒီနည်းအတိုင်း Orange ကိုလည်း Store ထဲ ရောက်ရှိသွားစေပါတယ်။

ဒီကုဒ်ကို node နဲ့ Run ကြည့်လိုက်ရင် အခုလို Console ရလဒ်ကို ရရှိနိုင်ပါတယ်။

['Apple']
['Orange', Apple]

အပြောင်းအလဲရှိတိုင်း ရိုက်ထုတ်ပေးဖို့ သတ်မှတ်ထားလို့ ပထမတစ်ကြိမ် Apple ရောက်သွားချိန် တစ်ကြိမ် ရိုက်ထုတ်ပေးပြီး ဒုတိယတစ်ကြိမ် Orange ရောက်သွားချိန် တစ်ကြိမ် ထပ်ရိုက်ထုတ်ပေးထားတာပါ။

Redux ရဲ့ အခြေခံ အသုံးပြုပုံကတော့ဒါပါပဲ။ သူ့ကို React နဲ့ တွဲသုံးပုံ ဆက်လက်ဖော်ပြပါမယ်။

react-redux

ဒီနေရာမှာလည်း အရိုးရှင်းဆုံးသောကုဒ်ကို ဖော်ပြပေးမှာပါ။ စာဖတ်သူက React ကို အခြေခံလောက်ဖြစ်ဖြစ် သုံးတတ်သူဖြစ်ဖို့ လိုပါတယ်။ အရင်ပို့စ်တစ်ခု မှာ React အကြောင်းကို ဖော်ပြခဲ့ဖူးပါတယ်။ လိုအပ်ရင် လေ့လာကြည့်ပါ။

ပထမဆုံးအနေနဲ့ create-react-app ကိုအသုံးပြုပြီး React Project တစ်ခုတည်ဆောက်ရပါမယ်။ ပြီးရင် Project ဖိုဒါထဲကိုသွားပြီး Redux ကို Install လုပ်ပါမယ်။ ပြီးရင်တော့ Project ကို တစ်ခါတည်း Run လိုက်ပါမယ်။

create-react-app try-redux
cd try-redux
npm install redux react-redux
npm start

လက်တွေ့အနေနဲ့ src/index.js ထဲမှာပါဝင်လာတဲ့ ကုဒ်တွေကိုဖယ်ပြီး၊ ဒီကုဒ်ကို ကူးယူစမ်းသပ် ကြည့်နိုင်ပါတယ်။

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

var store = createStore(function(state=[], action) {
    if(action.type == 'add') {
        return [
            action.data,
            ...state
        ];
    }

    return state;
});

class App extends React.Component {
    constructor() {
        super();
        this.input = React.createRef();
    }

    render() {
        return (
            <div>
                <input type="text" ref={this.input} />
                <button onClick={()=> {
                    this.props.add(this.input.current.value)
                }}>+</button>
                <ul>
                    {this.props.data.map((item) => {
                        return <li>{item}</li>
                    })}
                </ul>
            </div>
        )
    }
}

var ReduxApp = connect(function(state) {
    return {
        data: state
    }
}, function(dispatch) {
    return {
        add: function(data) {
            dispatch({type: 'add', data: data});
        }
    }
})(App);

ReactDOM.render(
    <Provider store={store}>
        <ReduxApp />
    </Provider>,
    document.getElementById('root')
);

စောစောက ရေးခဲ့တဲ့ createStore ကိုပဲ ပြန်သုံးထားပါတယ်။ <App> Component ကိုတော့ ရိုးရိုး React ရေးထုံးအတိုင်းပဲ ရေးသားထားတာပါ။ props.data ကို Loop လုပ်ပြီး ရိုက်ထုတ် ဖော်ပြစေထားခြင်း ဖြစ်ပါတယ်။ ဒါ့အပြင် Input Box တစ်ခုနဲ့ Button တစ်ခုပါဝင်ပြီး Button ကို Click လုပ်ရင် Input Value ကို Parameter အဖြစ်ပေးပြီး props.add() ကို Run ထားပါတယ်။

နောက်တစ်ဆင့် ရောက်တော့မှ react-redux ရဲ့ connect() Function ကို သုံးပြီး <App> Component ကို Redux Store နဲ့ ချိတ်ပေးထားပါတယ်။ အဲ့ဒီလိုချိတ်ဖို့ Callback Function (၂) ခုကို Parameter အဖြစ်ပေးရပါတယ်။ ပထမ Function က Redux Store ထဲက Data တွေကို React props အဖြစ်ပြောင်းရမယ့် Logic ဖြစ်ပြီး၊ နောက် Function ကတော့ Redux Store ထဲက Data တွေကို ပြောင်းလဲစေနိုင်တဲ့ Dispatch Function တွေကို React props အဖြစ် ပြောင်းပေးခြင်း ဖြစ်ပါတယ်။ ဒီလိုတွေပေးထားလို့ <App> Component မှာ props.data နဲ့ props.add တို့ကို အသုံးပြုနိုင်သွားတာ ဖြစ်ပါတယ်။

ရပါပြီ။ React Component နဲ့ Redux Store တို့ချိတ်မိသွားပြီဖြစ်လို့ Input မှာ တစ်ခုခုရိုက်ထည့်ပြီး Button ကို နှိပ်ရင် Redux Store ထဲကို ရောက်ရှိသွားပြီး အဲ့ဒီလို ရောက်ရှိသွားတဲ့ Data တွေကို <App> Component က ပြန်လည်ဖော်ပြထားတာကို တွေ့မြင်ရမှာပဲ ဖြစ်ပါတယ်။

အခုလောက်ဆိုရင် စာဖတ်သူလည်း ခေါင်းမူးသွားလောက်ပါပြီ။ React ချည်းသက်သက်ကို အရင်ကျင်လည်အောင် လေ့လာပြီး နောက်တစ်ခါ ပြန်လာကြည့်ပါ။ ရှင်းပြထားတဲ့ စာတွေကို ချန်ပြီး ကုဒ်နမူနာကနေသာ သူ့ရဲ့အလုပ်လုပ်ပုံကို နားလည်အောင် ကြိုးစားကြည့်ပါ။ စာက အထောက်အကူ ဖြစ်မလားလို့သာ ထည့်ထားတာပါ။ တစ်ကယ့် ရှင်းလင်းချက်က နမူနာရေးပြထားတဲ့ ကုဒ်ကိုယ်တိုင်ပဲ ဖြစ်ပါတယ်။

👍

တိူင်ပတ်နေတုံး

ကျေးဇူးပါဆရာ