最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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
}

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

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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P08:Redux基础-Redux制作ToDoList列表

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发