@nine7soft/react-modx
v1.0.4
Published
React-modx is an implementation of a Design Pattern Modular Redux. (https://www.genui.com/resources/modular-redux)
Downloads
4
Readme
React-modx
React-modx is an implementation of a Design Pattern Modular Redux. (https://www.genui.com/resources/modular-redux)
What is Modular Redux?
From the point of view of modular design, there were four main opportunities for improving Redux design patterns:
- Encapsulate
- Consolidate
- Isolate
- Minimize
Example
You can look at the example in the git repository (https://github.com/nine7soft/react-modx)
Hook
import { useModularState } from "../../config/useModularState";
import * as reducers from "./reducers";
import * as sagas from "./sagas";
import { HelloStoreInterface } from "./HelloStoreInterface";
export function useHelloWorld() {
const initialState: HelloStoreInterface = {
example: {
title: "",
description: "",
},
};
const [helloWorldValue, actions] = useModularState("helloWorldValue", initialState, {
reducers: { ...reducers },
sagas: { ...sagas },
});
return { helloWorldValue, actions };
}
Saga
import { put, getContext, call } from "redux-saga/effects";
import { SagaCallable } from "react-modx";
import { Types } from "../types";
export const getHelloWorld: SagaCallable = {
type: Types.GET_HELLO_WORLD,
call: function* () {
const fakeApiClient: any = yield getContext("fakeApiClient");
const response = yield call([fakeApiClient, "getHelloWorld"]);
yield put({ type: Types.ADD_HELLO_WORLD, payload: response });
},
};
Reducer
import { ReducerCallable } from "react-modx";
import { Types } from "../types";
import { HelloWorldInterface } from "../../../models/HelloWorldInterface";
import { HelloStoreInterface } from "../HelloStoreInterface";
export const addHelloWorld: ReducerCallable = {
type: Types.ADD_HELLO_WORLD,
call: (currentState: HelloStoreInterface, helloWorld: HelloWorldInterface[]) => {
return {
...currentState,
example: helloWorld[0],
};
},
};