Skip to content

Instantly share code, notes, and snippets.

@NayHtwe24

NayHtwe24/redux_from saya ei maung

Created January 7, 2019 10:22
Show Gist options
  • Save NayHtwe24/ab846f172bf88342cd10e6acb19940fe to your computer and use it in GitHub Desktop.
Save NayHtwe24/ab846f172bf88342cd10e6acb19940fe to your computer and use it in GitHub Desktop.
Download ZIP
redux_from saya ei maung
Raw
redux_from saya ei maung
# The Most Minimal React-Redux
Redux ဟာ ေလ့လာသူတိုင္းကို ေခါင္းမူးေစတဲ့ နည္းပညာတစ္ခုပါ။ ဒီေလာက္ႀကီး ခက္လွလို႔မဟုတ္ပါဘူး။ သူသုံးထားတဲ့ နည္းစနစ္ေတြေၾကာင့္ လူေတြကို မ်က္စိလည္ေစတာပါ။ ဒီေတာ့ ရသလိုလို မရသလိုလိုေတြျဖစ္ၿပီး စိတ္ညစ္ကုန္ၾကေရာ။ ဒီေနရာမွာ အေျခခံအက်ဆုံးနဲ႔ အရွင္းဆုံး Redux ကုဒ္နမူနာကို ေဖာ္ျပေပးပါမယ္။ ရႈပ္ေထြးတဲ့ နည္းပညာေတြ ပါဝင္မွာ မဟုတ္ေပမယ့္ ကုဒ္ရဲ႕ဖြဲ႕စည္းပုံ ဆန္းျပားလို႔ Programming အျမင္ အေတာ္ေလးရွိဖို႔ လိုအပ္ႏိုင္ပါတယ္။ ဒီထက္ရွင္းေအာင္ေတာ့ ေရးျပလို႔ ရႏိုင္ေတာ့မွာ မဟုတ္ပါဘူး။
လက္ေတြ႕ စမ္းသပ္ၾကည့္ႏိုင္ဖို႔အတြက္ ပထမဦးဆုံး Project ဖိုဒါတစ္ခုေဆာက္ၿပီး အထဲမွာ Redux ကို Install လုပ္လိုက္ပါ။
```
npm install redux --save
```
ၿပီးရင္ `index.js` အမည္နဲ႔ ဒီကုဒ္ကို ကူးယူစမ္းသပ္ၾကည့္ပါ။
```JavaScript
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 ကို အေျခခံေလာက္ျဖစ္ျဖစ္ သုံးတတ္သူျဖစ္ဖို႔ လိုပါတယ္။ <a href="https://gist.github.com/eimg/f48b602107907fe5cefdb4d4297cd665">အရင္ပို႔စ္တစ္ခု</a> မွာ React အေၾကာင္းကို ေဖာ္ျပခဲ့ဖူးပါတယ္။ လိုအပ္ရင္ ေလ့လာၾကည့္ပါ။
ပထမဆုံးအေနနဲ႔ <a href="https://github.com/facebook/create-react-app">create-react-app</a> ကိုအသုံးျပဳၿပီး 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` ထဲမွာပါဝင္လာတဲ့ ကုဒ္ေတြကိုဖယ္ၿပီး၊ ဒီကုဒ္ကို ကူးယူစမ္းသပ္ ၾကည့္ႏိုင္ပါတယ္။
```JavaScript
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 ခ်ည္းသက္သက္ကို အရင္က်င္လည္ေအာင္ ေလ့လာၿပီး ေနာက္တစ္ခါ ျပန္လာၾကည့္ပါ။ ရွင္းျပထားတဲ့ စာေတြကို ခ်န္ၿပီး ကုဒ္နမူနာကေနသာ သူ႔ရဲ႕အလုပ္လုပ္ပုံကို နားလည္ေအာင္ ႀကိဳးစားၾကည့္ပါ။ စာက အေထာက္အကူ ျဖစ္မလားလို႔သာ ထည့္ထားတာပါ။ တစ္ကယ့္ ရွင္းလင္းခ်က္က နမူနာေရးျပထားတဲ့ ကုဒ္ကိုယ္တိုင္ပဲ ျဖစ္ပါတယ္။
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment