如何通过反应物还原实现待办事件

之前也写过一篇关于Redux的文章，简单了解一下Redux以及如何使用。今天，我将分享一个入门级的React Redux antd来实现一个简单的待办事件。同时，我也谈谈我对Redux的理解。我们先来看一张图片：

我们用一个简单的比喻来帮助我们更好地理解Redux。我们用这个比喻(图书馆借阅):1。反应组件：借款人2。Action Creators:你必须说你想借书，也就是一句话：我想借书3。商店：图书管理员4。Reducer:图书馆员不可能记住所有的书，所以Reducer就像

通俗理解：我想借书。我想先开口，告诉图书管理员我想借书。当图书管理员知道时，他不可能知道所有的书在哪里，所以他需要一本小册子来找到它们。找到后，他会发给你。对专业术语的理解：(组件)借书，我需要先开口(动作)，告诉图书管理员(商店)我想借书。当图书管理员知道后，他不可能知道所有的书都在哪里，所以他需要一本小册子(Reducer)来找到它们，然后寄给你(Component)。

当你看图片时，你可以看到这个比喻是否更好理解。我们可能对流程很清楚，所以让我们开始看看如何编写这个待办事项列表。我们先做个提纲，然后写代码。1.react组件(todolist.js)2。介绍antd3。写入存储4。写reducer5。写操作

可能是上面的一些过程：

如何介绍antd？

官方文档：链接描述

文件目录结构如下：

在创建文件之前，首先创建一个管理员(存储)。他不知道书在哪里，所以他制作了一本小册子(redux)并交给图书管理员(store):

//src/redux/index . jsimport { CreateStore }来自“redux”；从“”导入减速器。/reducer ' const store=CreateStore(reducer)；导出默认存储；//src/redux/reduce . jsconst default state={ inputvalue e : ' '，list:[1，2]}导出默认值(状态=defaultState，操作)={ return state} *注意：在状态开始时，您必须为状态分配一个初始值，这样您就不会报告错误

接下来，您可以使用todolist.js中的store.getState()来获取store的值，我将它直接赋给state :

我先实现一个Component发送的动作，商店接收动作，然后由reducer处理，最后返回到一个新的状态，Component接收并显示：

//src/redux/todolit . jsimport从“React”开始反应；导入“antd/dist/antd . CSS”；从“antd”导入{输入、按钮、列表}；从“”导入存储。/index '；将默认类导出到oList扩展React。组件{构造器(道具){ super(道具)；this . state=store . GetState()；} ComponentDidMount(){ console . log(this . state)；} handleChg=(e)={ const action={ type : ' change _ input _ value '，inputvalue e : e . target . value } store . dispatch(action)；} render(){ console . log(this . state)return(div style={ { marginto p : ' 10px '，margin left : ' 20px ' } } input place holder='请输入' style={{width:' 400px '，margin right : ' 10px ' } } onchange={ this . handlechg } value={ this . state . input }//div。}}思路：我们通过监控输入框中的内容变化来发送动作，由reuter处理

//src/redux/reduce . jsconst default state={ input value e : ' '，list:[1，2]}导出默认值(状态=defaultState，action)={ if(action . type==' change _ input _ value '){ const newState=JSON . parse(JSON . stringify(state)). newState . inputvalue=action . inputvalue；返回新状态；}返回状态；}可以打印出newState看看，会发现inputValue就是你输入的值。

那么我们就可以从别人那里得出推论。

完整代码：

///src/redux/index。jsimport { createStore }来自“redux”；从""导入减速器/reducer ' const store=CreateStore(reducer)；///src/redux/reducers.jsexport默认存储；const DefaultState={ InputValue e : ' '，list:[1，2]}导出默认值（状态=defaultState，action)={ if(action)。type==' change _ input _ value '){ const NewState=JSON。解析(JSON。stringify(state))NewState。InputValue=action。InputValue返回新状态；} if(action。type===' send _ message '){ const newState=JSON。解析(JSON。stringify(state))newState。名单。推送(新闻状态。input value)；newState.inputValue=返回新状态；} if(action。type===' delete _ message '){ const newState=object。assign({ }，state)；纽斯塔特。名单。拼接(动作。指数，1)；返回新状态；}返回状态；}///src/redux/todolit。jsimport从“反应”反应过来；导入" antd/dist/antd。CSS”；从“蚂蚁”导入{输入、按钮、列表};从""导入存储“/index”；const data=[ 1，2，3]；将默认类导出到oList扩展做出反应.组件{构造器（道具){ super(道具);这个。状态=存储。GetState()；store.subscribe(这个. F5)} ComponentDidMount(){控制台。日志(这个。国家)；} handleChg=(e)={ const action={ type : ' change _ input _ value '，inputvalue e : e . target。价值}商店。派遣(行动)；} HandleSend=()={ const action={ type : ' send _ message '，} store。派遣(行动)；} F5=()={ this。SetState(存储。GetState())；} handleItem=(索引)={ const action={ type : ' delete _ message '，index : index } store。派遣(行动)；} render(){ console。日志(这个。state)返回(div style={ { marginto p : ' 10px '，marginLeft:'20px'}}输入占位符='请输入style={{width:'400px '，右边距： ' 10px ' } } onChange={ this。handlechg }值={ this。国家。input value }/Button type=' primary ' OnClick={ this。handlesend }发送/Button div style={ { width : ' 400 px '，marginTop:'10px'}}列表边框数据源={这个。国家。列表}渲染项目={(项目，索引)=(列表.item OnClick={ this。HandleItem。绑定(此，索引)}{item}/List .item)}//div/div)；} }//index.jsimport从“反应”进行反应；从“反应世界”导入ReactDOM "进口"。/index。CSS '；从""导入到列表/redux/ToDolist '；ReactDOM.render(TodoList /，document。GetElementBYID(' root ')；这样就实现了一个利用回家的来实现简单的待办事项。

相信你如果写完这个演示之后，肯定对Redux大致有了了解。如果自己在写的过程中有什么疑惑，欢迎提出，我会给你解答。后期也会更新一些关于Redux的其他方面的知识。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。