Redux基本使用（Redux第二弹）

Redux基本使用（Redux第二弹）

提示：本人是自学前端的一枚小小程序媛，以下内容是自己总结的笔记，如有错误，欢迎大家批评指正！！！！

---

1.通过Input输入框体验Redux，输入框改变影响store里的值

• 给input输入框绑定一个onChange事件，只要文本框内容一改变就会触发一个函数，并且定义这个函数，
  

• 建立action对象，（我们的目的是改变store里的值），对象里有两个属性，一个是type，相当于给action起名字，一个是value，是要传递到store里的值
  

• action建立好之后要想到store仓库中需要dispatch一下
  

• dispatch到仓库之后，仓库没有任何功能，就是一个仓库，只会接收到值，但是没有任何管理能力，就像一个收钱的人，但是不管钱，直接把这个action传递给了reducer，对应图中的第四步
  

• 这时在输入框输入值之后，我们在reducer中进行打印会发现，reducer里的state是默认定义的state，reducer里的action是我们传入的action，这就说明reducer接收到组件数据的改变了
  

• 接下来需要在reducer中进行判断，判断action的type和组件中定义的action的type是否相等，如果相等就证明是传递过来的action，需要注意的是在reducer中只能接收state，不能改变state，所以我们要把state进行深度拷贝，拷贝之后再把传递过来的action里的值赋给store中定义好的state里的值，
  
  

• 处理完业务逻辑，把新的值返回给仓库了，return newState 对应步骤6

• 返回仓库之后，需要在组件内部进行订阅，
  
  

• 订阅的目的是把state里的值返回到组件内部

---

2.在input输入框输入一项，在列表增加该项，要求用redux实现

• 步骤和上面几乎一样，我们在复习一下redux的基本使用

• 给button组件添加点击事件，
  

• 在响应事件中定义action，必须写type属性，action定义之后要发送一个dispatch，
  

• dispatch之后就可以直接到reducer里进行处理了，切记不能改变state，所以需要拷贝之后在处理
  

• 返回仓库之后，需要在组件内部进行订阅，因为第一个问题我们已经订阅了，这里就可以不用再次订阅了，这样在页面点击增加，就会把input输入框内新输入的值添加到store中定义好的list中

---

3.点击列表项进行删除

• 给每一个子项添加一个点击事件，

• 定义方法，拿到数组下标，因为list有很多项，我们要具体删除某一项要拿到下标
  

• 定义action，通过store.dispatch传递到仓库直达reducer，

• 在reducer中进行数据处理，先深拷贝数据，然后使用splice删除传递过来的数据，
  

• 最后一步别忘了在组件内部订阅一下