这里直接做的demo,Action还不清楚咋事,
先总结下大概流程:
首先明白store的翻译是仓库的意思,其次我们从redux中引出createStore,然后引入reducer,还记得上面的图么,想象成图书馆,找图书时需要去找管理员reducer拿到数据,reducer的作用就是暴露一个方法,将你的状态返回,因为reducer是管理状态的
这是store.getState()输出结果
想用redux插件去看需要加入这句
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
OKOKOKOKOKOKOKOK,我才看了b站技术胖的视频,听他说完懵了。。。。就直接做,很少说原因。。没办法,我猜吧!我最喜欢干这事了。
一点点粘,把过程走一遍,我就不信了
首先给input加一个onChange事件,让他去得到每一次输入的值,这里我们进行流程图的第一步Action,我们给action起一个名字,相当于key,在调用的时候找到它,然后再把需要的值传过去,为什么呢,因为我们总体的目的是要从仓库中读出来,然后显示。这时候我们就要先通过store.dispatch将action推进去,这里值每次改变,都会触发推送。
(这里是reducer),这里两个参数,state和action,state这有默认值,这里的操作是,如果组件那的输入框输入了值我就吧action推送进来,它的type符合要求,我就把键盘输入的值赋值给我要显示的值newstate.inputValue上,然后把newState返回出去(其实感觉就是state,但是这里克隆的那一步,查了下,是为了保留每一次的改变历史,有很多种办法)
这是action的内容
ok 我们再回到组件中,刚才返回的newState现在在store中了,至此我们想一下,还剩下哪条线,就剩下store指向组件指一条了吧,我们要在组件中通过订阅的方式对组件中state发生更新(因为我们初始化的时候订阅了一次),如下:
当我门store从reducer中返回得到的值发生了变化,那么我们就触发这个storeChange函数,当然这是自己定义的,它这个名字也挺好,简洁明了,
至此,我们终于理清了。。。。有点想念vuex,但是这个用到switch的话,感觉还是react挺适合大型项目,合作起来开发,需要的东西都可以从这里取到,感觉像往仓库推,拿,更新组件的state一样,继续努力吧!
添加一个添加事件
add = () => {
const action = {
type:'addItem',
}
store.dispatch(action)
}
export default (state = defaultState, action) => {
console.log(state, action)
//Reducer里只能接受state,不能改变state
if(action.type === 'changeInput'){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
if(action.type === 'addItem'){
let newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
newState.inputValue = ''
return newState
}
return state
}
Ok最后一个,
这里需要注意的是传参不能直接传,直接传立即就会调用了,用bind来搞定这个。