Github repository for demo website here
Live demo here
Redux like state management in react with less boilerplate and a simple to use hook.
I started a project to learn more about event driven functional JS but somehow ended up with this.
The project still has a lot of shortcomings which I will fix as I learn more.
Written in Typescript
Includes a demo react app using the library
No dependency other than react ofc
I wrote all utility functions for deep / shallow diffs, deep copy for arrays / objects from scratch
Has a lot of monkey-patching all over the place which I plan to fix soon
npm install pmrjs
yarn add pmrjs
This follows redux style of code
Creating a store (store.js)
import { createStore, createStoreHook } from "pmrjs"
import { reducer } from "./reducer"
export const store = createStore(reducer);
export const useStore = createStoreHook(store);
Reducer function (reducer.js)
const initialState = {
isAuth: false,
loading: {
postsLoading: false,
},
posts: [],
user: {},
}
export const reducer = (state = initialState, action) => {
switch (action.type) {
case "AUTHORIZED":
return {
...state,
isAuth: true,
};
case "USER_LOADED":
return {
...state,
user: { ...(action.payload as ProfileData) },
};
case "LOGOUT":
return {
...state,
isAuth: false,
};
case "LOADING_POSTS":
return {
...state,
loading: {
...state.loading,
postsLoading: true,
},
};
case "LOADED_POSTS":
return {
...state,
loading: {
...state.loading,
postsLoading: false,
},
posts: action.payload.posts,
};
default:
return state;
}
}
Actions (actions.js)
export const login = (state, history) => {
fetch(
`http://localhost:3000/results?email=${state.email}&login.password=${state.password}`
)
.then((res) => res.json())
.then((res) => {
if (res.length) {
store.dispatch({
type: "AUTH_LOADED",
});
store.dispatch({
type: "USER_LOADED",
payload: res[0],
});
history.push("/");
} else {
console.log("Error - Invalid Details");
}
})
.catch((err) => console.log(err));
};
Usage inside a component (Login.jsx)
import {login} from "./actions"
import { ConnectHoc } from "pmrjs";
import { useStore } from "./store";
function Login() {
const [data] = useStore(Login) #pass component reference to useStore
return (
#JSX
<input type="email">
<input type="password">
<button onClick={() => login("email and password values")}>
{
data.isAuth ? <p>Logged In</p> : <p>Logged Out</p>
}
)
}
const mapState = (state) => ({
isAuth: state.isAuth,
});
export default ConnectHoc(Login, mapState);
Clone this repository
npm install
To Start the demo
npm start
Run lint checks
npm run lint
Build
npm run build