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)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay