Ducks: Redux Reducer Paketleri

Her redux uygulamasi gelistirdigimde, uygulamami parca parca yaziyorim. Bu surecte, kendimi surekli {actionTypes, actions, reducer} uclemesini yazarken buluyorum. Bunlari ayri dosyalarda hatta ayri klasorlerde tutuyordum. Ancak 95% oranda sadece tek reducer/action ikilisi bu iliskileri kullanmaya ihtiyac duyuyor.

Bence, bu parcalari tek dosyada toplu sekilde tutmak cok daha mantikli. Boylece izole sekilde, paketlenmis bir sekilde bir arada durabilirler.

Oneri

Ornek

Bakiniz: Common JS Ornegi.

// widgets.js

// Actions
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// Reducer
export default function reducer(state = {}, action = {}) {
  switch (action.type) {
    // reducer ile ilgili seyler buraya gelecek
    default: return state;
  }
}

// Action Creators
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget () {
  return dispatch => get('/widget').then(widget => dispatch(updateWidget(widget)))
}

Kurallar

Bir modul...

KESINLIKLE reducer() adinda bir fonksiyonu export default ile export etmeli
KESINLIKLE aksiyon ureten tanimlari fonksiyon olarak export etmeli
KESINLIKLE action tiplerini npm-module-or-app/reducer/ACTION_TYPE isimlendirme yapisiyla tanimlamali
BELKI aksiyon turlerini UPPER_SNAKE_CASE seklindeki isimlendirme yapisiyka expor tedebilir, eger disaridan bir reducer dinlemek isterse, tekrardan kullanilabilir sekilde olurlar.

Ayni kurallar {actionType, action, reducer} uclulueri icin de gecerli.

Isimlendirme

Java, jars ve beans paketlerine sahip. Ruby'nin gem'leri var. Ben bu reducer paketlerine "ducks" (ordekler) adini vermek istiyorum. "redux" ise sesdes oluyorlar boylece.

Kullanimi

Hala sunu yapabilirsiniz:

import { combineReducers } from 'redux';
import * as reducers from './ducks/index';

const rootReducer = combineReducers(reducers);
export default rootReducer;

Bunu da:

import * as widgetActions from './ducks/widgets';

...boylece sadece action ureticilerini import etmis olursunuz, bindActionCreators() methodunda kullanima hazir olurlar.

Aslinda, ayrica default'u import edecek, bu da reducer fonksiyonunuz olacak.

Bazen action creator'lar disindaki seyleri export etmek isteyeceksiniz. Kodu bozmayacaktir. Sadece action creator'lari export etmekniz gerekir diye bir kural yok sonucta.

import {loadWidgets, createWidget, updateWidget, removeWidget} from './ducks/widgets';
// ...
bindActionCreators({loadWidgets, createWidget, updateWidget, removeWidget}, dispatch);

Ornek

React Redux Universal Hot Example projesi "ducks" kullaniyor. Bakiniz: /src/redux/modules.

Todomvc da ducks kullaniyor.

Implementasyon

Migrasyon aslinda oldukca basit. Bence buyuk bas agrisindan kurtariyor gelistiricileri.

Herhangi bir kutuphane kullanmadan bu yaklasimi uygulamak mumkun. Ancak asagidaki implementasyonlar ve kutuphaneler araciligiyla isinizi kolaylastirabilirsiniz:

extensible-duck - Ducks onerisinin uygulanmis hali. Bu kutuphane ile tekrardan kullanilabilir duck uretmek oldukca kolay.
saga-duck - Ducks onerisinin Typescript ile uygulanmis hali. Ayrica saga'lar da dusunulmus. Tekrar kullanilabilir duck uretmek icin baska bir kutuphane.
redux-duck - Redux modulleri ni ducks-modular-redux modeliyle uretmek icin yardimci bir sinif.
modular-redux-thunk - action, reducer, ve selector'leri organize etmenize yarayacak ducks'dan esinlenilmis bir kutuphane. redux-thunk destegi de mevcut.
molecular-js - Ducks'a benzer, moduler paketler olusturmanizi saglayacak yardimci methodlardan olusan bir paket.
ducks-reducer - ducks nesnelerini reducer'lara donusturen bir fonksiyon.(combineReducers'a es deger), ve ducks-middleware de ducks nesnelerinden olusan middleware'leri tek bir middleware'e ceviren yardimci applyMiddleware.