Redux
三大特性,单一数据源,State只读,纯函数执行修改
一、创建仓库
默认仓库对象是浅拷贝,容易出问题所以要深拷贝来解决
const store = Redux.createStore(reducer)
参数一放数据
参数二后期更新的信息放action里面
let initState = { num: 666 }
let reducer = (state = initState, action) => {
}
const store = Redux.createStore(reducer)
二、获取数据并在页面战展示
通过函数 store.getState()
拿到数据
store.getState().num
这就是数据
document.querySelector('div').innerHTML = store.getState().num
三、更新
通过函数 store.dispatch()
更新
dispatch({type: 判断, payload: 参数})
里面必须是对象,type
固定写法,触发函数会将 type
交给 action
action.type
拿到
document.querySelector('#btn').onclick = () => {
store.dispatch({
type: 'aaa'
})
}
四、必须监听数据变化,同步视图
通过函数 store.subscribe()
监听
store.subscribe(() => {
document.querySelector('div').innerHTML = store.getState().num
})