npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@payping/redux

v2.24.0-beta.14

Published

payping redux

Downloads

78

Readme

This document has been updated to version 2.0.0

What is it

  • this package is meant to build a redux store object with some default configs + payping redux actions & reducers

  • plus it comes with redux-persist integration as an optional feature

  • it uses redux-thunk & promise as default middlewares

    • promise middleware: it allows redux to use promisified actions
  • it also has redux-devtools & redux-logger enabled when NODE_ENV is not equal to "production" "test"

How to use

Initial work:
  1. create a directory called redux in your app root dir and actions, reducers & configs subdirectories in it.

  2. create index.ts file in redux/configs just like the following code:

// root/redux/configs/index.ts

import { SdkConfigureStore } from "@payping/redux/store";

export const reduxConfig: SdkConfigureStore = {};
  1. At the index.tsx file in your app root dir, create store in it by passing reduxConfig to the configureStore() method
// root/index.tsx

import { configureStore } from "@payping/redux";
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import { reduxConfig } from "./redux/configs";

export const { store } = configureStore(reduxConfig);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
  1. export all actions from package in redux/actions/index.ts file:
// root/redux/actions/index.ts

export * from "@payping/redux/actions";
Assumptions:

By combining some of the following assumptions, you can build the store object:

  1. I don't want to use redux-persist and I have no custom redux configs or additional actions & reducers.

  2. I want to use redux-persist.

  3. I have some custom redux configs.

  4. I have some additional actions or reducers.

Pick the instruction you need, from bellow:

Instructions:

whenever you needed to add some reducers to your redux, create a new interface in redux/configs/index.ts, called AppStoreStates which extends SdkStoreStates. then modify configureStore(reduxConfig) to configureStore<AppStoreStates>(reduxConfig). and istead of SdkStoreStates, use AppStoreStates wherever you needed that.

use SdkThunkDispatch type whenever you want to add type for a dispatcher

  • for assumption 1:
    • you don't need to do anything
  • for assumption 2:
  1. create persistConfig.ts file in redux/configs just like the following code:
// root/redux/configs/persistConfig.ts

import { SdkPersistConfig } from "@payping/redux/store/persistConfig";
// use localForage for web & desktop, and AsyncStorage for react-native
import localForage as storage from "localforage";
// import AsyncStorage as storage from '@react-native-community/async-storage';
import env from "../env";

const { storeVersion } = env;

const persistConfig: SdkPersistConfig = {
  storage,
  version: storeVersion,
};

export default { ...persistConfig };

by default, it create persisted reducer with stateReconciler: autoMergeLevel2 and version: 2 options

change version option, whenever you changed the reducers architecture

you can add any other redux-persist related config (check SdkPersistConfig interface) you want to it.

  1. import and add persistConfig to redux/configs/index.ts just like the following code:
// root/redux/configs/index.ts

import { SdkConfigureStore } from "@payping/redux/store";
import persistConfig from "./persistConfig";

export const reduxConfig: SdkConfigureStore = {
  appPersistConfig: persistConfig
};
  1. wrap your ReactDom.render() in a function called onRehydrated in order to render the app after persisted redux store, rehydrated from storage. it's for preventing any issue in redux related logics. then, pass the onRehydrated to the configureStore() method.
// root/index.tsx

import { configureStore } from "@payping/redux";
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import { PersistGate } from "redux-persist/integration/react";
import { reduxConfig } from "./redux/configs";

// eslint-disable-next-line @typescript-eslint/no-use-before-define
export const { store, persistor } = configureStore({ ...reduxConfig, onRehydrated });

const onRehydrated = (): void => {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>,
    document.getElementById("root")
  );
};
  • for assumption 3:
    • add your redux configs in redux/configs/index.ts. e.g. adding router middleware:
// root/redux/configs/index.ts

import { SdkStoreStates } from "@payping/redux/reducers";
import { SdkConfigureStore } from "@payping/redux/store";
import { RouterState, connectRouter, routerActions, routerMiddleware } from "connected-react-router";
import { LocationState, createHashHistory } from "history";
import { AnyAction, Reducer, StoreEnhancer } from "redux";

export interface AppStoreStates extends SdkStoreStates {
  router: RouterState<LocationState>;
}

export const history = createHashHistory();

const router = routerMiddleware(history);

const appReducers = {
  router: connectRouter(history) as Reducer<RouterState<LocationState>, AnyAction>,
};

const appMiddlewares = [router];
const composeActionCreators = { ...routerActions };

export const reduxConfig: SdkConfigureStore = {
  appMiddlewares,
  appReducers,
  composeActionCreators
};
  • for assumption 4:
  1. define your actions and reducers like the samples at the end of this page in redux/actions or redux/reducers respectively.

  2. export your actions in redux/actions/index.ts like below:

// root/redux/actions/index.ts

export * from "@payping/redux/actions";
export { logout, refreshToken, toggleLoggingIn } from "./appAuth";
  1. add your reducer in appReducers at redux/configs/index.ts and add it to AppStoreStates interface (implement interface if it doesn't exist).
// root/redux/configs/index.ts

import { SdkStoreStates } from "@payping/redux/reducers";
import { SdkConfigureStore } from "@payping/redux/store";
import appAuth, { AppAuthState } from "../reducers/appAuth";

export interface AppStoreStates extends SdkStoreStates {
  appAuth: AppAuthState;
}

const appReducers = {
  appAuth
};

export const reduxConfig: SdkConfigureStore = {
  appReducers,
};
  1. modify configureStore(reduxConfig) to configureStore<AppStoreStates>(reduxConfig).

sample action

// root/redux/actions/appAuth.ts

import { CLEAR_LIST, LOGGED_OUT, LOGGED_IN, SdkThunkActionResult, SdkThunkDispatch } from "@payping/redux/reducers";
import {
  LoggedInAction,
  TOGGLE_LOGGING_IN,
  ToggleLoggingInAction
} from "../reducers/appAuth";

function toggleLoggingIn(): ToggleLoggingInAction {
  return {
    type: TOGGLE_LOGGING_IN
  };
}

function loggedIn(token: string, expiresIn: number): LoggedInAction {
  return {
    payload: { expiresIn, token },
    type: LOGGED_IN
  };
}

function logoutDispatchs(): SdkThunkActionResult<Promise<void>> {
  return async (dispatch): Promise<void> => {
    dispatch({ type: LOGGED_OUT });
  };
}

export { toggleLoggingIn, loggedIn, logoutDispatchs };

sample reducer

// root/redux/reducers/appAuth.ts

import { LoggedOutAction } from "@payping/redux/reducers";

export const TOGGLE_LOGGING_IN = "TOGGLE_LOGGING_IN";
export const LOGGED_OUT = "LOGGED_OUT";
export const LOGGED_IN = "LOGGED_IN";

export interface AppAuthState {
  isLoggingIn: boolean;
}

export interface ToggleLoggingInAction {
  type: typeof TOGGLE_LOGGING_IN;
}

export interface LoggedInAction {
  type: typeof LOGGED_IN;
  payload: { token: string; expiresIn: number };
}

export type AuthActionTypes = ToggleLoggingInAction | LoggedInAction | LoggedOutAction;

export const initialState: AppAuthState = {
  isLoggingIn: false
};

export default function appAuth(state = initialState, action: AuthActionTypes): AppAuthState {
  if (action.type === TOGGLE_LOGGING_IN) {
    return {
      ...state,
      isLoggingIn: !state.isLoggingIn
    };
  }

  if (action.type === LOGGED_IN) {
    const { token, expiresIn } = action.payload;
    return {
      ...state,
      expiresIn,
      token
    };
  }

  if (action.type === LOGGED_OUT) {
    return initialState;
  }

  return state;
}

Checking changes before Publish:

  1. Run script for building package on local (customPrepublishOnly:app or customPrepublishOnly:admin).
  2. Output will be in a dist|distAdmin folder at the root of the project.
  3. Go to the project that you want to install this package in and install it locally:
    yarn add ../redux/dist/
    or
    yarn add ../redux/distAdmin/

    NOTE: If your project has submodules you need to use the -W option in yarn add command and replace the version of the package in all package.json files with this route ../redux/dist/.

How to Publish:

Admin:

  1. Create a release branch for this new version (its name should be the new version that you want to publish plus admin for example 1.0.4-admin):

  2. Edit build_config/admin/package.json version (pay attention to Semver)

  3. Run script for publishing package on registry:

NOTE: In your terminal you should be logged in at our registry at https://npmregistry.manatadbir.ir If you aren't, run:

 npm logout
 npm login --registry=https://npmregistry.manatadbir.ir
yarn customPublish:admin
  1. Finish your release branch

Dashboard:

  1. Create a release branch for this new version (its name should be the new version that you want to publish plus app for example 1.0.4-app):

  2. Edit build_config/app/package.json version (pay attention to Semver)

  3. Run script for publishing package on registry:

NOTE: In your terminal you should be logged in at npm registry at https://registry.npmjs.org. If you aren't, run:

 npm logout
 npm login
yarn customPublish:app
  1. Finish your release branch