zoukankan      html  css  js  c++  java
  • redux (一)


    redux 是一个状态管理的库。

    redux认为页面所有的变化,都是基于状态的改变触发的,所以我们维护一个应用的时候,都是在维护这些状态。而 redux 就是为了维护状态而生的。

    API

    • createStore( reducer, [initialState], enhancer ) 函数:
      创建应用的数据 store (一个对象,包含了应用所有的状态),一个应用只能有一个store。

    createStore参数

    reducer: 一个纯函数,接收两个参数,分别是当前的state 和 action,(action就是一个指令,用来告诉redux改修什么状态) , reducer的返回值必须是新的state。
    [initialState] (any): 初始时的 state 。
    enhancer : 增强器。也就是中间件,可以改变,redux规定的一些接口类型。

    createStore返回值

    保存了应用所有 state 的对象。改变 state 的惟一方法是 通过 dispatch 发起action,redux会执行对应state更新函数。subscribe( fn ) 监听器可以监听state的变化,执行传入的函数。

    import { createStore } from 'redux'
    
    // reducer 函数
    function todos(state = [], action) {
      switch (action.type) {
        case 'ADD_TODO':
        // 数据变化后返回的必须是一份新的数据,而不能在原来的数据上修改
          return state.concat([ action.text ])
        default:
          return state
      }
    }
    
    // createStore 函数 ,接收reducer 和 初始state 
    let store = createStore(todos, [ '小明' ])
    
    // dispatch 发起 action,在这里,action还附带了一个 text 的数据给reducer
    store.dispatch({
      type: 'ADD_TODO',
      text: '小李'
    })
    
    //监听器,state更新时,就会触发。
    store.subscribe(()=>console.log("数据更新啦"));
    
    // store.getState 可以获取到最新的state。
    console.log(store.getState()) // ["小明","小李"]
    
    
    • combineReducers( reducers )
      用来对复杂应用的 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分。
      合并后的 reducer 可以调用各个子 reducer,并把它们的结果合并成一个 state 对象。state 对象的结构由传入的多个 reducer 的 key 决定。
    combineReducers({ 
        todos: myTodosReducer, 
        counter: myCounterReducer 
    }) 
    

    参数:
    reducers (Object): 一个对象,它的值(value) 对应不同的 reducer 函数,这些 reducer 函数后面会被合并成一个
    返回值:合并了所有子reducer的reducer函数

    子reducer => reducers/todos.js

    export default todos( state=[] , action ){
      switch (action.type) {
      case 'ADD_TODO':
        return state.concat([action.text])
      default:
        return state
      }
    }
    
    

    子reducer => reducers/counter.js

    export default counter( state = 0 , action ){
        switch( action.type ){
            case "INCREMENT":
                return ++state
            case "DECREMENT":
                return --state
            default:
                return state    
        }
    } 
    
    

    用 combineReducers 合并所有子 reducer。
    reducers/index.js

    import { combineReducers } from 'redux'
    import todos from './todos'
    import counter from './counter'
    
    // 合并并导出reducer
    export default combineReducers({
        todos,
        counter
    })
    
    

    App.js 使用合并后的reducers

    import { createStore } from 'redux'
    import reducer from './reducers/index'
    
    // 创建store时就可以用合并后的reducer
    let store = createStore( reducer );
    
    console.log(store.getState()) // { counter:0 , todos:[] }
    
    store.dispatch({
      type: 'INCREMENT'
    })
    
    console.log(store.getState()) // { counter:1 , todos:[] }
    
    
  • 相关阅读:
    Siri
    ArcSDE和Geodatabase10.1抢先版谍照介绍(3)——ArcToolbox工具和其他功能
    ‘马太’效应
    Linux琐屑下Resin JSP MySQL的布置和设置配备陈设2
    平安防御:分级防御对Linux服务器的攻击
    Linux无法解析域名的处理活动
    Ubuntu Linux Server的用户僻静后果分析
    大概要领确保确保Linux体系中SSH的安适性
    无错版Vsftpd Mysql Pam设置虚拟用户要领
    Redhat Linux AS4下的LAMP与Discuz装置1
  • 原文地址:https://www.cnblogs.com/koala0521/p/8303762.html
Copyright © 2011-2022 走看看