Top 10 Examples of "easy-peasy in functional component" in JavaScript

{
    listenTo: 1,
  },
);

const listeningInvalidFunc: Action = action(
  (state, payload) => {
    state.logs.push(payload);
  },
  // typings:expect-error
  {
    listenTo: () => undefined,
  },
);

const multiListeningAction: Action = action(
  (state, payload) => {
    state.logs.push(payload);
  },
  {
    listenTo: [targetModel.doAction, targetModel.doThunk],
  },
);

const multiListeningActionInvalid: Action = action(
  (state, payload) => {
    state.logs.push(payload);
  },
  // typings:expect-error
  {
    listenTo: [targetModel.doAction, targetModel.doThunkInvalid],
  },

// typings:expect-error
  {
    listenTo: targetModel.doActionInvalid,
  },
);

const listeningThunk: Action = action(
  (state, payload) => {
    state.logs.push(payload);
  },
  {
    listenTo: targetModel.doThunk,
  },
);

const listeningThunkInvalidPayload: Action = action(
  (state, payload) => {
    state.logs.push(payload);
  },
  // typings:expect-error
  {
    listenTo: targetModel.doThunkInvalid,
  },
);

const listeningString: Action = action(
  (state, payload) => {
    state.logs.push(payload);
  },
  {
    listenTo: 'ADD_TODO',
  },

lastName: string;
}

interface SessionModel {
  user?: User;
  register: Action;
  unregister: Action;
  sessionListeners: ThunkOn;
}

const sessionModel: SessionModel = {
  user: undefined,
  register: action((state, payload) => {
    state.user = payload;
  }),
  unregister: action(state => {
    state.user = undefined;
  }),
  sessionListeners: thunkOn(
    actions => [actions.register, actions.unregister],
    (actions, target) => {
      const { payload } = target;
      if (payload == null) {
      } else {
        payload.firstName + payload.lastName;
      }
    },
  ),
};

// #endregion

const todos: TodosModel = {
  items: [],
  add: action((state, payload) => {
    state.items.push(payload);
  }),
  clear: action(state => {
    state.items = [];
  }),
};

const model: Model = {
  todos,
};

const store = createStore(model);

store.dispatch.todos.add('foo');
// typings:expect-error
store.dispatch.todos.add(1);
// typings:expect-error
store.dispatch.todos.add();

store.dispatch.todos.clear();

interface ListeningModel {
  logs: string[];
}

interface TargetModel {
  doAction: Action;
  doThunk: Thunk;

injections.fetch().then(() => 'done');
        dispatch({ type: 'FOO' });
        getStoreActions().audit.log('foo');
        meta.parent.concat(['foo']);
        meta.path.concat(['foo']);
        return 1;
      },
    ),
    syncThunk: thunk((actions, payload) => {
      return 'Woot!';
    }),
    empty: thunk(() => {}),
  },
};

const store = createStore(model);

store
  .getActions()
  .audit.syncThunk()
  .toUpperCase();
store
  .getActions()
  .audit.log('foo')
  .then(result => result + 1);
// typings:expect-error
store.getActions().audit.log(1);
// typings:expect-error
store.getActions().audit.log();

store.getActions().audit.empty();
// typings:expect-error

interface PersistPartial {
  persist: string;
}

function persistReducer(
  baseReducer: Reducer,
): Reducer<s> {
  return (baseReducer as unknown) as Reducer<s>;
}

const store = createStore(model, {
  reducerEnhancer: reducer =&gt; persistReducer(reducer),
});

const configuredStore = createStore(model, {
  disableImmer: false,
  devTools: false,
  initialState: { foo: 'bar' },
  injections: { foo: 'bar' },
  mockActions: true,
  name: 'bob',
  reducerEnhancer: reducer =&gt; reducer,
});

store.getActions().doActionVoid();

store.getActions().doAction(true);
store.dispatch.doAction(true);

// typings:expect-error
store.getActions().doAction(1);</s></s>

return items.length;
    }),
    getById: selector([state => state.items], ([items], [id]) => {
      return items.find(x => x.id === id);
    }),
    unTypedArgs: selector([state => state.items], ([items]) => items.length),
  },
  status: {
    totalTodos: selector(
      [(state, storeState) => storeState.todos.count],
      ([count]) => count(),
    ),
  },
};

const store = createStore(model);

const count = store.getState().todos.count();

count + 1;

// typings:expect-error
store.getState().todos.getById();

// typings:expect-error
store.getState().todos.getById('foo');

const todo = store.getState().todos.getById(1);

// typings:expect-error
todo.text + 'foo';

() => 'ADD_TODO',
  (actions, target) => {
    actions.log(target.payload);
  },
);

const invalid3: ThunkOn = thunkOn(
  // typings:expect-error
  () => 1,
  // typings:expect-error
  (actions, target) => {
    actions.log(target.payload);
  },
);

const invalid4: ThunkOn = thunkOn(
  // typings:expect-error
  () => undefined,
  // typings:expect-error
  (actions, target) => {
    actions.log(target.payload);
  },
);

const valid4: ThunkOn = thunkOn(
  actions => [
    actions.doActionString.type,
    actions.doThunkString.type,
    actions.doThunkString.startType,
    actions.doThunkString.successType,
    actions.doThunkString.failType,
  ],

actions.doThunkString.failType,
  ],
  (actions, target) => {
    actions.log(target.payload);
  },
);

const invalid5: ThunkOn = thunkOn(
  actions => [actions.doActionString, actions.doThunkNumber],
  (actions, target) => {
    // typings:expect-error
    actions.log(target.payload);
  },
);

const valid5: ThunkOn = thunkOn(
  actions => [actions.doActionString, actions.doThunkNumber],
  (actions, target) => {
    if (typeof target.payload === 'number') {
    } else {
      actions.log(target.payload);
    }
  },
);

const valid6: ThunkOn = thunkOn(
  () => ['foo', 'bar'],
  (actions, target) => {
    actions.log(target.payload);
  },
);

if (target.error != null) {
      target.error.stack;
    }
    actions.log(target.payload);
  },
);

const invalid1: ThunkOn = thunkOn(
  actions => actions.doActionNumber,
  (actions, target) => {
    // typings:expect-error
    actions.log(target.payload);
  },
);

const valid2: ThunkOn = thunkOn(
  actions => actions.doThunkString,
  (actions, target) => {
    actions.log(target.payload);
  },
);

const invalid2: ThunkOn = thunkOn(
  actions => actions.doThunkNumber,
  (actions, target) => {
    // typings:expect-error
    actions.log(target.payload);
  },
);

const valid3: ThunkOn = thunkOn(
  () => 'ADD_TODO',