zoukankan      html  css  js  c++  java
  • react-redux

    react中的数据仓库store:

    原理:

      View页面交互使用 store.dispatch() 分发action,action中进行匹配处理找到对应的reducer(对state的处理方法),reducer中相应的reduce对state进行修改操作,在reducer中处理好的数据返回给对应的aciton,

      action 需要返回一个新的state,在页面View中使用store.getState()

    建立文件夹:/src/store

    在文件夹中新建文件:

    index.js => 全局store对象

    reducer.js=> 处理action的方法,state数据,修改state的方法

    action.js=>匹配action

    第一步:

      页面分发action:

      1.引入store:

       import  store from  '../src/index';

      2.分发action:

       一般是触发某个事件才进行action的分发:

       store.dispatch({ type:action的type , 接收的参数名称:参数值 })

      3.此时可以获取更新后的state:

    第二步:

      action中接收进行action的匹配:

      export  function  actionTypeName( 接收的参数 ){

        return  { type:'名称',参数名 }

      }

    第三步:

       reducer中具体对state 的修改:

      import  {  XXactionName  }  from  './action.js' ;

      import  { combineReducers  }  from  'redux'

      //  定义reduce的方法,接收两个参数,state和action,可以为state设置默认的值, action 包含携带了的参数

      function  redName  ( state,action ){

        switch(action.type){  //  匹配action
          case XXactionName : 

            return  state + action.num    //  返回新的处理后的state

          default :

            return  state

        }

      }

      function fn2(... , ...){

        ......

      }

      .........     //  可以定义多个reduce处理方法

      //  使用combineReducers将自己定义的reduce方法进行合并

      const  reducer = combineReducers(redName , fn2 , .. . . . )

      export  default  reducer

      

  • 相关阅读:
    Java中判断两个列表是否相等
    chrome:插件、跨域、调试....
    mac 开发环境采坑
    webpack升级踩坑
    js-使用装饰器去抖
    React setState 笔试题,下面的代码输出什么?
    react 解决:容器组件更新,导致内容组件重绘
    centos使用ngnix代理https
    javascript 理解继承
    js 数据监听--对象的变化
  • 原文地址:https://www.cnblogs.com/VaeVae/p/10256521.html
Copyright © 2011-2022 走看看