New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

guide-eazy

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

guide-eazy

Guide for React

  • 0.0.12
  • npm
  • Socket score

Version published
Maintainers
0
Created

favicon-x128.png

Redux Eazy

lang version

Redux Eazy

Usage

install

pnpm i redux-eazy

Create Store Entity

/* name */
import slice from "./slice";
import thunks from "./thunks";
import watch from "./watch";

const store: {
	slice: typeof slice;
	thunks: typeof thunks;
	watch: typeof watch;
} = {
	slice,
	thunks,
	watch,
};

export default store;

Register Store Names

const names = {
	authStore: "authStore",
	appStore: "appStore",
};

export default names;

Create Slice - Store Slice

Main Responsibilities:

  1. Define state variables and initialize state.
    • The purpose of setting stateInit is to enable the reset of Redux.
  2. Set reducers to modify the state.
  3. Configure extraReducers for Redux thunks.
/* Core */
import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import names from "../names";
import { IGeo } from "src/service/model/geo";
import { createSliceCustom } from "src/redux-helper";

/* Types */
export interface SliceState {
	geoData: IGeo[];
	info: string;
}

const initialState = (): SliceState => {
	return {
		geoData: [],
		info: "test",
	};
};

const appSlice = createSliceCustom({
	name: names.appStore,
	stateInit: initialState,
	reducers: {
		setInfo(state, action: PayloadAction<string>) {
			state.info = action.payload;
		},
		setGeoData(state, action: PayloadAction<IGeo[]>) {
			state.geoData = action.payload;
		},
	},

	extraReducers: (builder) => {},
});

export default appSlice;

Create Thunks - Asynchronous Operations

Main Responsibilities:

  1. Create asynchronous operation thunks.
  2. Integrate HTTP request logic.
  3. Modify the state of any repository through dispatch.
/* Instruments */
import { dp } from "src/service";
import { FileUploadApiRequest } from "src/service/model/appStoreModel";
import { QueryGeoRequest } from "src/service/model/model";
import { createThunks } from "src/service/setup";
import names from "../names";
import httpApi from "./api";

const thunks = createThunks(names.appStore, {
	geoQueryAct: async (arg: QueryGeoRequest, api) => {
		const { data } = await httpApi.geoQueryApi(arg);
		dp("appStore", "setGeoData", data);
	},
	getUploadUrlAct: async (arg: FileUploadApiRequest, api) => {
		const { file, ...rest } = arg;
		const { data } = await httpApi.getUploadUrlApi(rest);
		const { fileUrl, presignedUrl } = data;
		await httpApi.fileUploadApi(presignedUrl, file!);
		return { presignedUrl, fileUrl };
	},
});
export default thunks;

Create Watch

Main Responsibilities:

  1. Listen for changes in all repositories, including its own, and respond accordingly.
import { ListenerMiddleware, createMatcher } from "src/redux-helper";
import { dp, getActionType } from "src/service";
import { SliceState } from "./slice";
import { startAppListening } from "src/service/setup";

const watch = (listenerMiddleware: ListenerMiddleware) => {
	startAppListening({
		matcher: createMatcher<SliceState>((action) => {
			return action.type == `${getActionType("appStore").setInfo}`;
		}),
		effect: (_) => {
			dp("authStore", "setToken", { token: Date.now().toString() });
		},
	});
	listenerMiddleware.startListening({
		predicate: (action, currentState, previousState) => {
			return false;
		},
		effect: async (action, listenerApi) => {},
	});
};

export default watch;

Create API

import { http } from "src/common/http";
import { QueryGeoRequest } from "../../model/model";
import { IGeo } from "src/service/model/geo";
import {
	FileUploadApiRequest,
	FileUploadApiRespone,
} from "src/service/model/appStoreModel";

function geoQueryApi(params: QueryGeoRequest) {
	return http.request<{ content: IGeo[] }>({
		url: "/nestApi/geo/query",
		method: "POST",
		data: params,
	});
}

function fileUploadApi(url: string, params: File) {
	return http.put(url, params, {
		headers: {
			"Content-Type": "multipart/form-data",
		},
	});
}

function getUploadUrlApi(params: FileUploadApiRequest) {
	return http.request<{ content: FileUploadApiRespone }>({
		url: "/nestApi/file/get/uploadUrl",
		method: "POST",
		data: params,
	});
}

const api = {
	getUploadUrlApi,
	geoQueryApi,
	fileUploadApi,
};

export default api;

Configuration for Type Support

import { Action, ThunkAction, TypedStartListening } from "@reduxjs/toolkit";
import {
	appSelectorHookCreater,
	getCreateThunkWithName,
	getCreateThunks,
	listenerMiddleware,
	useReduxDispatch,
} from "redux-super";
import { reduxStore } from "./index";
/* Types */
export type ReduxStore = typeof reduxStore;
export type ReduxState = ReturnType<typeof reduxStore.getState>;
export type ReduxDispatch = typeof reduxStore.dispatch;
export type ReduxThunkAction<ReturnType = void> = ThunkAction<
	ReturnType,
	ReduxState,
	unknown,
	Action
>;
export const createThunkWithName = getCreateThunkWithName<
	ReduxState,
	ReduxDispatch
>;
export const useDispatch = useReduxDispatch<ReduxDispatch>;
export const useAppSelecter = appSelectorHookCreater<ReduxState>;
export type AppStartListening = TypedStartListening<ReduxState, ReduxDispatch>;
export const startAppListening =
	listenerMiddleware.startListening as AppStartListening;
export const createThunks = getCreateThunks<ReduxState, ReduxDispatch>();

Create Redux Store

import {
	createStore,
	flatInjectHookCreater,
	getActionTypeCreater,
	getDp,
	resetReduxHookCreater,
} from "redux-super";
import { stores } from "./stores";

export const getActionType = getActionTypeCreater(stores);

export const reduxStore = createStore(stores);

/* Hooks */
export const useResetRedux = resetReduxHookCreater(stores);
export const useFlat = flatInjectHookCreater(stores, reduxStore);
/* utils */
export const dp = getDp(reduxStore, stores);

hooks

useFlatInject

Reducers, thunks, and states are all exported in a flat structure, which is quite convenient. Moreover, thunks can be executed directly without needing to dispatch them. This is quite handy.

import Talk from "talkjs";
import { useEffect, useRef } from "react";
import { useFlatInject } from "../hooks";

const ChatFunction = () => {
	const { userInfo, userInfoMemberAct } = useFlatInject("authStore");
	useEffect(() => {
		userInfoMemberAct();
	}, []);

	const chatContainer = useRef(null);

	return (
		<div>
			<div ref={chatContainer} style={{ height: "800px" }}></div>
		</div>
	);
};

export default ChatFunction;

useResetRedux

reset redux

import { useMemo } from "react";
import { useDispatch } from "react-redux";
import storageHelper from "src/common/utils/storageHelper";
import { stores } from "src/service/stores";

const useResetRedux = () => {
	const dp = useDispatch();
	const func = useMemo<() => void>(() => {
		return () => {
			storageHelper.clear();
			Object.values(stores).forEach((item) => {
				const { reset } = item.slice.actions as any;
				reset && dp(reset());
			});
		};
	}, []);
	return func;
};

export default useResetRedux;

useAppSelector

useDispatch

utils

awsomeDispatch

createThunkWithName

createSliceCustom

createWatchMatcher

getActionType

FAQs

Package last updated on 09 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts