Enforcing Action contract on reducers

  • A parent reducer/effect (Eg. FilterBar) that dispatches APPLY_FILTER action to all it’s dynamic Filters needs to make sure that all FilterReducers have this action reducer implemented.
  • One way to do this is to create an Interface:
  • export interface FilterReducer {
    (action: ApplyFilterAction): State; // Just give signature
    actionReducer(action: UserInputAction): State; //OR give identifier as well
    }

    Now, the reducer that implements this needs to be a class that has a rootReducer that delegates actions:

    public reducer(state = this.initialState, action: Action): State {
    switch (action.type) {
    case APPLY_FILTER: {
    this.actionReducer(action);
    break;
    }
    This is a problem coz reducers need to be pure functions
    Also when they’re called, they don’t have “this” so above call this.actionReducer won’t work.
  • The class cannot be static coz it has to implement the interface.
  • Another way to do this is to move the reducer out of the class and then it instantiates the class and calls the actionReducer.
  • The WAY THAT WORKS IS USING POJOs: 
  • interface FilterReducer {

    (action: ApplyFilterAction): State; // Just give signature
    actionReducer(action: UserInputAction): State; //OR give identifier as well
    }

    interface MyFilterReducer {

    // for all properties beyond what the filter reducer enforces
    a: string;
    }
    let ActionReducerPOJO: FilterReducer | MyFilterReducer = {
    ActionReducer: (action: UserInputAction) => {

    ....

    return newState;
    },
    a: '10'

    };

    DETAILS HERE: https://spin.atomicobject.com/2016/09/27/typed-redux-reducers-typescript-2-0/

  • TAKE THIS FORWARD USING THIS POST: https://blog.mariusschulz.com/2016/11/03/typescript-2-0-tagged-union-types

Having Reducers check if the Action is Correct

  • In case we just want to make sure that the action interface is correct, without enforcing it, we can simply define an interface with the signature:
    • export interface FilterReducer {
      (action: ApplyFilterAction): State; // Just give signature
      }
      Then when we invoke the reducer, we can have a wrapper of FilterReducer that checks compliance with the Action interface and then invokes the reducer:
      function wrapperActionReducer(myReducer: FilterReducer) {
      actionReducer(UserInputAction);
      }

Also Check Out:

  • USE POJOs instead of Static Classes :
  • Static classes in languages like C# exist because there are no other top-level constructs to group data and functions. In JavaScript, however, they do and so it is much more natural to just declare an object like you did. To more closely mimick the class syntax, you can declare methods like so:

    const myStaticClass = {
        property: 10,
    
        method() {
    
        }
    }
  • Using Singleton pattern: http://stackoverflow.com/questions/13212521/typescript-static-classes
  • See http://www.basarat.com/2013/04/typescript-static-constructors-for.htmlThis is a way to ‘fake’ a static constructor. It’s not without its dangers – see the referenced codeplex item.
    class Test {
        static foo = "orig";
    
        // Non void static function
        static stat() {
            console.log("Do any static construction here");
            foo = "static initialized";
            // Required to make function non void
            return null;
        }
        // Static variable assignment
        static statrun = Test.stat();
    }
    
    // Static construction will have been done:
    console.log(Test.foo);
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s