DEV Community

frustigor
frustigor

Posted on

A mutable react state management container react-tyshemo

You may use react-redux for a long time, now, try a new state management container.

import { use } from 'react-tyshemo'

// register a state space
use({
  name: 'statenamespace',

  state: {
    name: 'xxx',
    age: 10,
  },

  methods: {
    updateAge(age) {
      this.age = age
    },
  },
})
import { connect } from 'react-tyshemo'

function MyComponent(props) {
  const { name, age, updateAge } = props
  return <span onClick={() => updateAge(age + 1)}>grow</span>
}

const mapToProps = (state, methods) => {
  return {
    ...state.statenamespace,
    ...methods.statenamespace,
  }
}

const mergeToProps = (mapProps, ownProps) => {
  return {
    ...mapPorps,
    ...ownProps,
  }
}

export default connect(mapToProps, mergeToProps)(MyComponent)

Embrace mutable state, make things easy.

import { connect } from 'react-tyshemo'

function MyComponent(props) {
  const { some } = props
  return <span onClick={() => some.age ++}>grow</span>
}

const mapToProps = (state) => {
  return {
    some: state.statenamespace,
  }
}

export default connect(mapToProps)(MyComponent)

Notice the sentence some.age ++, it will trigger rerendering.

Read more about react-tyshemo.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more