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

      

  • 相关阅读:
    强弱类型 静态语言 动态语言 || 脚本语言
    mysql版本升级问题处理
    word
    IntelliJ IDEA 插件
    dubbo
    spring源码构建
    zookeeper 本地多线程模拟分布式事务控制及配置中心
    一次性关闭所有的Activity
    可能以后用得到得东西
    Thread.sleep还是TimeUnit.SECONDS.sleep
  • 原文地址:https://www.cnblogs.com/VaeVae/p/10256521.html
Copyright © 2011-2022 走看看