LitElement + Redux의 카운터

전회 에 lit-html , 지난번 는 LitElement 합니다.

Redux란?

샘플

지금이지만, 유행 상태 (state) 관리 라이브러리.

원래 왜 사용할 필요가 있을까 하면, 예를 들면 문서 트리 관계없이 복수의 표시 갱신을 하고 싶을 때에, 이벤트 메세지에 의한 부모와 자식간의 교환에서는 대처하기 어렵기 때문에, state 라고 하는 전체로 공통의 상태 보존처를 만든다 주고 받자.

Redux pwa-helpers 기사를 읽고,

state는 신청 접수 창구이다.

창구의 통합을 도모 할 수 있습니다

store란 신청서(양식)이다.

store = 창구에 제출(신청서명, 신청내용)

action 일람이 어떤 신청을 할 수 있는지의 일람표가 되어 전체상을 파악하기 쉽다

state는 실제 신청 처리입니다.

같은 신청에 대해서는 불쾌한 동일한 처리를 해 주므로 테스트하기 쉬워진다,

라고 이해했습니다.

LitElement + Redux에서 카운터

pwa-helpers의 store.getSate()를 사용하면 state를 업데이트 할 때 state가 호출되므로 LitElement 속성에 설정합니다.

※ 비동기 처리 라이브러리의 store.dispatch()
my-element.ts

import { LitElement, customElement, property, html } from '@polymer/lit-element'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { connect } from 'pwa-helpers'

// actions
const COUNT_UP = 'count-up'
const countUp = { type: COUNT_UP }
const countUpLate = dispatch => setTimeout(() => dispatch(countUp), 500) // thunk

// reducer
const initState = { counter: 0 }
const reducer = (state = initState, action) => {
  switch (action.type) {
    case COUNT_UP:
      return { ...state, counter: ++state.counter }
    default:
      return state
  }
}

// store
const store = createStore(reducer, applyMiddleware(thunk))

@customElement('my-element') class extends connect(store)(LitElement) {

  @property() counter

  stateChanged(state) {
    this.counter = state.counter
  }

  render() {
    return html`
      <h2>counter: ${this.counter}</h2>
      <button @click=${() => store.dispatch(countUp)}>+</button>
      <button @click=${() => store.dispatch(countUpLate)}>...+</button>
      `
  }

}

작동 방식으로, action 을 참조, 갱신하려면 action 경유에 한해, type 는 전체로 하나 하고 하지 않을 것 action 을 참조하려면 type 을 사용한다. state를 업데이트하려면 reducer를 사용하여 store 형식의 객체를 전달합니다. action 형식이란 최소한 무엇을 하고 싶은지의 식별 캐릭터 라인으로서 store.dispatch({type: 'TEST', data: 1}) 프로퍼티를 갖게 한다 reducer의 connect 속성에 따라 stateChanged (state)를 업데이트하는 redux-thunk라는 순수 함수 처리를 만듭니다.

흠, 구조는 알고 왔지만, 뭔가 돌고 있는 느낌이. . .

구성 요소 간의 값 교환

표시와 버튼을 다른 요소로 해 봅니다.

음, 전혀 머리에 들어오지 않습니다. . . 하지만 드디어

index.html

<counter-view></counter-view>
<counter-button></counter-button>

action이나 reducer를 만드는 것은 redux-actions
my-element.ts

import { LitElement, customElement, property, html } from '@polymer/lit-element'
import { createStore } from 'redux'
import { createAction, handleAction } from 'redux-actions'
import { connect } from 'pwa-helpers'

const countUp = createAction('COUNT_UP') // action
const countUpper = handleAction(countUp, state => ({ ...state, counter: ++state.counter }), { counter: 0 }) // reducer
const store = createStore(countUpper) // store

@customElement('counter-view') class extends connect(store)(LitElement) {

  @property() counter

  stateChanged({ counter }) {
    this.counter = counter
  }

  render() { return html`<h2>counter: ${this.counter}</h2>` }

}

@customElement('counter-button') class extends connect(store)(LitElement) {

   render() { return html`<button @click=${() => store.dispatch(countUp())}>+</button>` }

}

여기

깔끔하면서도 제대로 전달할 수 있네요. 생각보다 쓸만한 느낌이 들었습니다.

이상.