A mutable react state management container react-tyshemo

#react #statemanagement

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)