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.
Top comments (0)