typelessでReduxチュートリアルのTodoListを作ってみた

↓の記事でtypelessというツールキットを知ったので、typelessを使って、ReduxチュートリアルのTodoListを作ってみました。

• typelessというReact向け状態管理ライブラリがめっちゃいい - Qiita

ソースコード

• training-typeless/todos at cf138ab3b6d264e5fd7c6fab6d0e7cf01a7f5be8 · yskoht/training-typeless

メモ

redux-devtools-extension

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { RootEpic, RootReducer, TypelessProvider } from 'typeless';
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { App } from './components/App';

const rootEpic = new RootEpic();
const rootReducer = new RootReducer();
const store = (() => {
  if (process.env.NODE_ENV === 'production') {
    return createStore(rootReducer.getReducer());
  }
  return createStore(rootReducer.getReducer(), composeWithDevTools());
})();

ReactDOM.render(
  <TypelessProvider rootEpic={rootEpic} rootReducer={rootReducer} store={store}>
    <App />
  </TypelessProvider>,
  document.getElementById('app')
);

redux-devtools-extensionを使えるようにします。

stateが初期化されるタイミング

素のReduxだと@@INITのタイミングで初期状態がstateの中に保存されています↓

typelessではuseModuleが呼ばれたタイミングで@@typeless/addedがdispatchされて初期状態が保存されます↓

VisibleTodoListの中ではtodosとvisibilityFilterの両方の状態を使うので、
typelessのクイックスタートにあるようにuseModuleしてコンポーネントを返す、というのができませんでした。なのでuseModuleとコンポーネントを別々に呼び出しています。（ここうまく書く方法がわからない…）

// components/App.tsx

import React from 'react';
import {
  useTodoListModule,
  AddTodoComponent,
  VisibleTodoListComponent
} from '../features/todoList/module';
import { useFooterModule, FooterComponent } from '../features/footer/module';

export function App() {
  useTodoListModule();  // <- useModuleのみ
  useFooterModule();    // <- useModuleのみ

  return (
    <>
      <AddTodoComponent />
      <VisibleTodoListComponent />
      <FooterComponent />
    </>
  );
}