P08:Redux基础-Redux制作ToDoList列表

通过上节课的知识，我们用同样的方法和流程，再开发一遍 toDoList 里边的列表功能，具体来说就是当点击添加按钮时，ToDoList 组件的列表会增加。知识其实我们都已经会了，缺少的是熟练度。

编写按钮添加响应事件和 Action

先来编写按钮点击后的响应事件，打开TodoList.js文件，然后在按钮的地方加入onClick事件，记得要进行绑定哦。

<Button 
    type="primary"
    onClick={this.clickBtn}
>增加</Button>

然后在constructor里进行绑定，代码如下:

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

绑定之后就可以编写clickBtn()方法了，这里先用一个打印语句代替业务内容。

clickBtn(){
    console.log('mybj123.com')
}

这时候预览一下，点击”增加按钮”，在控制台就可以输出mybj123.com了。说明我们的事件添加成功了。

创建 Action 并用 dispatch()传递给 store

在clickBtn方法里增加 Action，然后用dispatch()方法传递给 store，代码如下:

clickBtn(){
   const action = { type:'addItem'}
   store.dispatch(action)
}

这时候已经把 action 传递给了store，然后去Reducer里编写业务逻辑就可以了。

编写 Reducer 的业务逻辑

打开reducer.js文件，先编写代码判断type是不是addItem，如果向 redux 的 list 中插入新值。

export default (state = defaultState,action)=>{
    if(action.type === 'changeInput'){
        let newState = JSON.parse(JSON.stringify(state)) //深度拷贝 state
        newState.inputValue = action.value
        return newState
    }
    //关键代码------------------start----------
    //state 值只能传递，不能使用
    if(action.type === 'addItem' ){ //根据 type 值，编写业务逻辑
        let newState = JSON.parse(JSON.stringify(state)) 
        newState.list.push(newState.inputValue)  //push 新的内容到列表中去
        newState.inputValue = ''
        return newState
    }
     //关键代码------------------end----------
    return state
}

因为上节课已经编写了订阅方法，所以到这里就可以打开浏览器进行预览了。你可以试着添加一些新的东西进来。

这节课到这里就结束了，虽然没有什么新的知识点，但是这个Redux的流程你必须要熟练掌握，因为在工作中编写 Redux 程序，我几乎每天都在和这个流程打交道，实现界面的快速响应。

以上关于P08:Redux基础-Redux制作ToDoList列表的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。