리액트 상태관리를 하는 가장 쉬운 방법 Plo

plo를 소개 합니다. plo는 간단한 상태관리 컨테이너 입니다.

https://www.npmjs.com/package/plo

plo

먼저 state와 getter, setter를 가지고 있는 Object를 선언합니다. 

const object = {
    state: 'hello',
    getState() {
    	return this.state
    },
    setState(state) {
    	this.state = state
    }
}

Object로 model과 subscribe를 생성합니다.

const [model, subscribe] = createModel(object)

model을 구독 합니다.

subscribe(model => {
    console.log(model.getState())
})

완료 되었습니다!

Object에서 선언한 메소드를 호출하기만 하면 됩니다.

model.setState('this is plo')

간단하죠?

리액트와 같이 사용하려면 react-plo를 사용하면 좋습니다.

https://www.npmjs.com/package/react-plo

react-plo

import React from 'react';
import { createModel } from 'plo'
import { connect } from 'react-plo'

const [counterModel, counterSub] = createModel({
  count: 0, 
  getCount() {
    return this.count
  },
  inc() { 
    this.count += 1 
  },
  dec() {
    this.count -= 1
  }
})

function App() {
  return (
    <div>
      <button onClick={counterModel.inc}>+</button>
      <button onClick={counterModel.dec}>-</button>
      count: {counterModel.getCount()}
    </div>
  )
}

export default connect([counterSub])(App)

 

plo와 함께 즐코!