ReactN
Reactの状態管理を一つのオブジェクトにまとめることでシンプルにする。しばらく使ってるけど便利。
$ npm install reactn
$ npm install redux reactn-devtools
tsimport addReactNDevTools from "reactn-devtools";
addReactNDevTools({ trace: true, traceLimit: 25 });
TypeScriptと組み合わせて使う場合、型チェックをきちんと働かせるためのコードが必要。
僕は初期値の設定と型の設定をまとめてやるようにしている。
initializeGlobalState.tsimport { 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 { }
}
index.tsinitializeGlobalState()
ReactDOM.render(<App />, document.getElementById('root'));
Next.jsではwithInitを使う
---
some.tsximport { useGlobal } from "reactn";
...
// in FC
// rewrite like below
// const [logs, setLogs] = useState([] as string[]);
const [logs, setLogs] = useGlobal("logs");
some.tsxsomePromise.catch(()=>{
// rewrite like below
// setLogs([ERROR_ON_SERVER]);
// setCanInput(false);
setGlobal({ logs: [ERROR_ON_SERVER], canInput: false });
})
-----
tsimport { useGlobal } from 'reactn';
export const PenButton = (props: any) => {
const [pathCount] = useGlobal("pathCount");
return <StyledIconButton aria-label="pen">
<StyledBadge badgeContent={pathCount} color="primary">
<PenSVGButton onClick={props.onClick} />
</StyledBadge>
</StyledIconButton>;
};
tsimport { getGlobal } from 'reactn';
tool.onMouseDown = (event: any) => {
setGlobal({ pathCount: getGlobal().pathCount + 1 })
tsexport const INITIAL_STATE = {
kanaBuffer: ""
};
export type TState = typeof INITIAL_STATE;
tsximport { 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>
<input type="text" onKeyDown={keydownListener}></input>
</p>
);
}
tsimport { getGlobal, setGlobal } from 'reactn';
import { TState } from './INITIAL_STATE';
const kanaListener = (kana: string) => {
const kanaBuffer = getGlobal<TState>().kanaBuffer;
setGlobal({ kanaBuffer: kanaBuffer + kana });
}