ReactN - 西尾泰和の外部脳

ReactN

Reactの状態管理を一つのオブジェクトにまとめることでシンプルにする。しばらく使ってるけど便利。

Redux不要論と、グローバル状態管理ライブラリReactNの紹介 - Qiita

状態更新に関するFacebookでの議論

CharlesStover/reactn: React, but with built-in global state management.

$ npm install reactn

ReactN devtool

$ npm install redux reactn-devtools

code:ts

import addReactNDevTools from "reactn-devtools";

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

TypeScriptと組み合わせて使う場合、型チェックをきちんと働かせるためのコードが必要。

僕は初期値の設定と型の設定をまとめてやるようにしている。

initializeGlobalState.ts

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'));

Next.jsではwithInitを使う

Next.jsでReactNを使う

---

code:some.tsx

import { useGlobal } from "reactn";

...

// in FC

// rewrite like below

// const logs, setLogs = useState([] as string[]);

const logs, setLogs = useGlobal("logs");

code:some.tsx

somePromise.catch(()=>{

// rewrite like below

// setLogs(ERROR_ON_SERVER);

// setCanInput(false);

setGlobal({ logs: ERROR_ON_SERVER, canInput: false });

})

-----

code:ts

import { useGlobal } from 'reactn';

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

const pathCount = useGlobal("pathCount");

return <StyledIconButton aria-label="pen">

</StyledBadge>

</StyledIconButton>;

};

code:ts

import { getGlobal } from 'reactn';

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

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

---- ignore below, see ReactN+TypeScript

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 = () => {

const kanaBuffer = useGlobal<TState>("kanaBuffer");

return (

<p>>{kanaBuffer}</p>

<p>

</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 });

}