美文网首页
redux--基本使用

redux--基本使用

作者: 习惯水文的前端苏 | 来源:发表于2021-01-10 03:52 被阅读0次

    redux的工作流程

        组件发出指令(actionCreator)到中间层(store),由中间层查找指令对应的指令回调(reducer)处理并return value(state)

    安装redux

        cnpm i redux --save

    示例-todolist

        在page文件夹下新建todalist.js,从antd引入list、input、button组件,代码如下

    效果如下

    创建store

        在page文件夹下创建store文件夹,为了做模块化处理,在该文件夹下创建index.js,作为redux的根入口,同时创建reducer.js作为组件发出指令的操作集合

        index.js

    (从redux引入创建store的接口,并与reducer建立关联,同时初始化调试工具,最后导出供外部组件使用)

        reducer.js

    (初始化一个空仓库,并导出供createStore创建关联)

    组件连接redux

        引入redux

        建立连接

    将数据存放到redux中

        将list和input的值从组件中摘除,存放到redux中,找到reducer.js,修改defaulfState如下

        同时在组件中将写死的data删除,改用state中的数据

    派发指令(更新input的值)

        向input组件添加onChange事件,获取每一次用户的输入内容

        当用户输入改变时派发指令

    (指令名称为'change-input-value',值为每一次用户输入的值,接着就是通知redux来活了)

    向redux发出通知

    (redux此时已经接收到我们发出的指令,但是此时它还不知道该怎么处理,因为我们还没有编写该指令所对应的回调事件)

    指令的回调处理

    (组件派发的指令会被redux接收,具体来说是它的store中间层,当store接收到指令时,会将上一次的state和组件派发的指令转发给reducer;由于只有中间层store有处理state的权限,因此我们需要拷贝一份并返回给store由其比对更新)

    订阅redux update

    (通过redux提供的subscribe接口订阅store变更,并重新赋值state)

    接着,为了方便管理,将生成指令单独拆成一个文件(actionCreators)并在reducer和todolist中引用

        在store下新建文件actionTypes

    (统一管理指令名称,可在一定程度上避免拼写等低级错误)

        在store下新建文件actionCreators

    (这里统一对指令进行管理,当组件内逻辑庞大时能在一定程度上减负)

            组件内使用

    最后,模拟下axios请求

        在todolist组件中的componentDidMount中发起请求并派发指令

    (数据是json-server模拟的)

            在actionTypes中创建指令名称

            在actionCreators中创建action

            最后在reducer中处理action

       


    至此,redux的基本使用就全部结束啦,感兴趣的同学可以继续将todolist的剩余功能完善即:点击提交按钮向list增加一条数据并清空input,点击item则删除list中对应的数据

    相关文章

      网友评论

          本文标题:redux--基本使用

          本文链接:https://www.haomeiwen.com/subject/umqciktx.html