ReactN

Simplify React's state management by combining it into one object. I've been using it for a while and it's useful.

$ npm install reactn

$ npm install redux reactn-devtools

code:ts

import addReactNDevTools from "reactn-devtools";

addReactNDevTools({ trace: true, traceLimit: 25 });

When used with TypeScript, code is needed to make the type checking work properly.

I try to do the initial value setting and type setting together.

code:initializeGlobalState.ts

import { setGlobal } from 'reactn';

const INITIAL_GLOBAL_STATE = {

logs: [] as string[],

}

export const initializeGlobalState = () => {

setGlobal(INITIAL_GLOBAL_STATE);

}

type TYPE_GLOBAL_STATE = typeof INITIAL_GLOBAL_STATE

declare module 'reactn/default' {

export interface State extends TYPE_GLOBAL_STATE { }

}

code:index.ts

initializeGlobalState()

ReactDOM.render(<App />, document.getElementById('root'));

Use withInit in Next.js

---

code:some.tsx

import { useGlobal } from "reactn";

...

// in FC

// rewrite like below

code:some.tsx

somePromise.catch(()=>{

// rewrite like below

// setCanInput(false);

})

-----

code:ts

import { useGlobal } from 'reactn';

export const PenButton = (props: any) => {

return <StyledIconButton aria-label="pen">

<StyledBadge badgeContent={pathCount} color="primary">

<PenSVGButton onClick={props.onClick} />

</StyledBadge>

</StyledIconButton>;

};

code:ts

import { getGlobal } from 'reactn';

tool.onMouseDown = (event: any) => {

setGlobal({ pathCount: getGlobal().pathCount + 1 })

code:ts

export const INITIAL_STATE = {

kanaBuffer: ""

};

export type TState = typeof INITIAL_STATE;

code:tsx

import { useGlobal, setGlobal } from 'reactn';

import { INITIAL_STATE, TState } from './INITIAL_STATE';

setGlobal(INITIAL_STATE);

const App: React.FC = () => {

return (

<p>>{kanaBuffer}</p>

<p>

<input type="text" onKeyDown={keydownListener}></input>

</p>

);

}

code:ts

import { getGlobal, setGlobal } from 'reactn';

import { TState } from './INITIAL_STATE';

const kanaListener = (kana: string) => {

const kanaBuffer = getGlobal<TState>().kanaBuffer;

setGlobal({ kanaBuffer: kanaBuffer + kana });

}

---