React的学习（5）Redux

这里直接做的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来搞定这个。
在这里插入图片描述