리덕스 삭제

오류의 희극.

Redux는 웹 시대에 대중화되기 훨씬 이전인 수십 년 전으로 거슬러 올라가는 상태 관리 패턴입니다. 모든 인기있는 것들과 마찬가지로 그것은 많은 매력과 비방을 가지고 있습니다. 내가 일한 거의 모든 곳에서 적어도 하나의 프로젝트에 사용했습니다. 좋든 싫든 redux는 오늘날 우리가 알고 있는 웹의 중심입니다.

이전에 redux를 사용해 본 적이 있다면 경건하지 않은 양의 상용구, 간접 참조 및 혼란이 수반된다는 것을 알게 될 것입니다. 튜토리얼에서 찾을 수 있는 이 간단한 예제를 보면서 눈을 떼지 마십시오.

const Increment = createAction("Increment", props<{ by: number }>())
const Double = createAction("Double")

class UICounterEffects {
   double = createEffect((actions) => {
      return actions.pipe(
         ofType(Increment),
         map(action => new Double()),
         delay(2000),
      )
   })
}

function countReducer(state, action) {
   switch(action.type) {
      case Increment.type: {
         return state += action.by
      }
      case Double.type: {
         return state *= 2
      }
   }
}

const countSelector = createSelector(state => state.count)

const initialState = {
  count: 0
}

const REDUCERS = {
  count: countReducer
}

const Store = createStore(REDUCERS, {
   initialState,
   effects: [UICounterEffects]
})

@Component({
   providers: [Store],
   template:
      <div>{{ count | async }}</div>
      <button (click)="increment(1)">
         Increment
      </button>
})
export class UICounter {
   private store = inject(Store)

   count = this.store.select(countSelector)

   increment(by) {
      this.store.dispatch(new Increment({ by }))
   }
}

이런 오버엔지니어링 배트맨! 아주 작은 작업에 너무 많은 코드가 있습니다. redux 없이 어떻게 보이는지 봅시다.

@Component({
   template:
      <div>{{ count }}</div>
      <button (click)="increment(1)">
         Increment
      </button>
})
export class UICounter {
   // we initialize some state
   count = 0
   // we dispatch an action
   increment(by) {
      // we update the state
      this.count += by
      // we run some effects
      setTimeout(() => {
         // we update the state again
         this.count *= 2
      }, 2000)
   }
}

첫 번째 예는 56줄에 걸친 1136바이트의 코드입니다. 두 번째 예는 18줄에 걸쳐 단 301바이트로 정확히 동일한 작업을 수행합니다! 또한 크기 순서대로 읽고 이해하기가 더 쉽습니다.



분명히 redux를 사용하는 사람들에게 문제가 있습니다.

"개발 도구", "시간 여행"및 "불변 상태"는 어떻습니까? 나는 이것들이 매우 과대 평가되고 중복된다고 말합니다. 다음 사람에게 호의를 베푸십시오. 응용 프로그램에서 redux하십시오.

상태는 기능에 따라 분할되어야 합니다(예: 인증 상태, 사용자 상태, 양식 상태). 애플리케이션 전체에서 상태를 실제로 공유해야 하는 경우가 아니면 구성 요소는 컨텍스트(읽기: 전역) 상태에 의존해서는 안 됩니다. 요컨대 서비스를 사용하십시오.

애플리케이션에서 redux를 삭제할 수 없더라도 괜찮습니다. 모든 것에 사용을 중지하십시오.

@Component({
   template:
      <div>{{ count }}</div>
      <button (click)="increment(1)">
         Increment
      </button>
})
export class UICounter {
   // we initialize some state
   count = 0
   // we dispatch an action
   @Action() increment(by) {
      // we update the state
      this.count += by
      // we run some effects
      return dispatch(timer(2000), () => {
         // we update the state again
         this.count *= 2
      })
   }
}

허용되는 양의 상용구