↓의 기사로 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 />
    </>
  );
}