P07:Redux基础

1. 增加 Input 响应事件
2. 创建 Action
3. store 的自动推送策略
4. 让组件发生更新
5. 总结

本文将要带大家作的就是通过Input的改变，体验一下Redux的整体流程，是如何编写代码的。我们要实现的是在TodoList的 Demo 中,只要文本框中的值改变就redux中store的值就跟着改变，并且随着Redux中的state值改变，组件也跟着改变。整个流程就是以前讲过的这个图，

让组件发生更新

现在 store 里的数据已经更新了，但是组件还没有进行更新，我们需要打开组件文件TodoList.js，在constructor，写入下面的代码。

constructor(props){
    super(props)
    this.state=store.getState();
    this.changeInputValue= this.changeInputValue.bind(this)
    //----------关键代码-----------start
    this.storeChange = this.storeChange.bind(this)  //转变 this 指向
    store.subscribe(this.storeChange) //订阅 Redux 的状态
    //----------关键代码-----------end
}

当然我们现在还没有这个storeChange方法，只要写一下这个方法，并且重新setState一次就可以实现组件也是变化的。在代码的最下方，编写storeChange方法。

storeChange(){
     this.setState(store.getState())
 }

现在浏览器中预览，可以看到组件和 Redux 中都同步进行了改变。

总结

本文内容比较多，把 Redux 的流程都走了一遍，如果这节课你能独立作下来，也就算 Redux 入门了。你可以把本文内容多看两遍，保证把基础知识打扎实，更重要的是一定要动手作，不然你真的学不会的。