बतख के साथ एक Redux एप्लिकेशन स्केलिंग

फ़ीचर बनाम फ़ीचर

दो दुनियाओं में से सबसे अच्छा संयोजन

पेश है फिर से डक

duck/
├── actions.js
├── index.js
├── operations.js
├── reducers.js
├── selectors.js
├── tests.js
├── types.js
├── utils.js

• प्रसंस्करण के सभी तर्क को अपने आवेदन की केवल एक अवधारणा में शामिल करें, उदाहरण के लिए: उत्पाद, गाड़ी, सत्र, आदि।
• Index.js फ़ाइल को रखता है, जिसे बतख नियमों के अनुसार निर्यात किया जाता है।
• एक ही फाइल में स्टोर कोड जो समान काम करता है, जैसे कि रिड्यूसर, चयनकर्ता और क्रियाएं।
• बतख से संबंधित परीक्षण।

प्रकार

const QUACK = "app/duck/QUACK";
const SWIM = "app/duck/SWIM";

export default {
    QUACK,
    SWIM
};

क्रिया

import types from "./types";

const quack = ( ) => ( {
    type: types.QUACK
} );

const swim = ( distance ) => ( {
    type: types.SWIM,
    payload: {
        distance
    }
} );

export default {
    swim,
    quack
};

संचालन

import actions from "./actions";

// This is a link to an action defined in actions.js.
const simpleQuack = actions.quack;

// This is a thunk which dispatches multiple actions from actions.js
const complexQuack = ( distance ) => ( dispatch ) => {
    dispatch( actions.quack( ) ).then( ( ) => {
        dispatch( actions.swim( distance ) );
        dispatch( /* any action */ );
    } );
}

export default {
    simpleQuack,
    complexQuack
};

कम करने वाली

import { combineReducers } from "redux";
import types from "./types";

/* State Shape
{
    quacking: bool,
    distance: number
}
*/

const quackReducer = ( state = false, action ) => {
    switch( action.type ) {
        case types.QUACK: return true;
        /* ... */
        default: return state;
    }
}

const distanceReducer = ( state = 0, action ) => {
    switch( action.type ) {
        case types.SWIM: return state + action.payload.distance;
        /* ... */
        default: return state;
    }
}

const reducer = combineReducers( {
    quacking: quackReducer,
    distance: distanceReducer
} );

export default reducer;

चयनकर्ताओं

function checkIfDuckIsInRange( duck ) {
    return duck.distance > 1000;
}

export default {
    checkIfDuckIsInRange
};

सूची

• डिफ़ॉल्ट रूप से बतख से रिड्यूसर फ़ंक्शन को निर्यात करता है ।
• पंजीकृत निर्यात के रूप में चयनकर्ताओं और संचालन को निर्यात करता है।
• अन्य प्रकारों में आवश्यक होने पर निर्यात प्रकार।

import reducer from "./reducers";

export { default as duckSelectors } from "./selectors";
export { default as duckOperations } from "./operations";
export { default as duckTypes } from "./types";

export default reducer;

टेस्ट

import expect from "expect.js";
import reducer from "./reducers";
import actions from "./actions";

describe( "duck reducer", function( ) {
    describe( "quack", function( ) {
        const quack = actions.quack( );
        const initialState = false;

        const result = reducer( initialState, quack );

        it( "should quack", function( ) {
            expect( result ).to.be( true ) ;
        } );
    } );
} );

बस इतना ही