0.4.4 • Published 7 years ago
react-update v0.4.4
react-update
Make setState easily and immutably.
So, why not use immutability-helper?
- No need to call setState manually
- No need to build syntactic sugar like
{x: {y: {$set: 1}}}
, just passx.y
and1
Installation
npm i --save react-update
Todo Demo
import update from 'react-update'
class Todos extends Component {
constructor() {
super()
this.update = update.bind(this)
this.state = {
text: '',
items: []
}
}
render() {
const { text, items } = this.state
const update = this.update
return (
<div>
<input type="text" value={text} onChange={e => update('set', 'text', e.target.value)} />
<button onClick={() => update('push', 'items', { text })}>Add</button>
<ul>
{items.map((item, i) => {
return (
<li key={i}>
{item.text}
<button onClick={() => update('splice', 'items', i)}></button>
</li>
)
})}
</ul>
</div>
)
}
}
API
Bind component and execute setState automatically
import update from 'react-update'
class App extends Component {
constructor() {
super()
this.update = update.bind(this)
this.state = {
name: 'John',
relation: {
family: 0,
friend: 1
},
honor: ['1', '2', '3']
}
}
someUsage() {
this.update('set', 'name', 'Wall')
this.update('set', 'relation.family', 1)
this.update('set', ['relation', 'family'], 0)
this.update('set', {
name: 'Jamas',
'relation.friend': 0
})
this.update('push', 'honor', '4') // ['1', '2', '3', '4']
this.update('splice', 'honor', 0) // ['2', '3', '4']
// All above actions just render once and all state has changed.
}
}
Silent usage
import update from 'react-update'
const myData = {x: {y: 0}}
const newData = update(myData, 'set', 'x.y', 1)
console.log(newData) // {x: {y: 1}}
Changelog
v0.4.0
2016-10-26
- Remove console info when state change.
- Add silent usage which would not execute setState automatically.
import update from 'react-update'
const myData = {x: {y: 1}}
const newData = update(myData, 'set', 'x.y', 2)
console.log(newTarget) // {x: {y: 2}}
0.4.4
7 years ago
0.4.3
7 years ago
0.4.2
8 years ago
0.4.1
8 years ago
0.3.9
8 years ago
0.3.8
8 years ago
0.3.7
8 years ago
0.3.6
8 years ago
0.3.5
8 years ago
0.3.4
8 years ago
0.3.3
8 years ago
0.3.2
8 years ago
0.3.1
8 years ago
0.3.0
8 years ago
0.2.1
8 years ago
0.2.0
8 years ago
0.1.1
8 years ago
0.1.0
8 years ago
0.0.9
8 years ago
0.0.8
8 years ago
0.0.7
8 years ago
0.0.6
8 years ago
0.0.5
8 years ago
0.0.4
8 years ago
0.0.3
8 years ago
0.0.2
8 years ago
0.0.1
8 years ago