zoukankan      html  css  js  c++  java
  • Redux

    官网:https://www.reduxjs.cn/

    Redux 是针对 JavaScript 应用程序的可预测状态容器。

    解决项目数据管理、组件通信,用于数据和交互较多的应用

    一、安装

    cnpm install redux --save

    二、创建Store

      Store 就是用来维持应用所有的 state 树 的一个对象。 改变 store 内 state 的唯一途径是对它 dispatch(action)。

       Store 的职责:

    维持应用的 state;
    提供 getState() 方法获取 state;
    提供 dispatch(action) 方法更新 state;
    通过 subscribe(listener) 注册监听器;
    通过 subscribe(listener) 返回的函数注销监听器。

    import { createStore } from 'redux';
    // 创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。
    const store = createStore(reducer);

    三、Reducer

      reducer (Function): 接收两个参数,分别是当前的 state 树和要处理的 action,返回新的 state 树。 

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

    四、Action

      Action:一个普通对象,触发数据(State)改变的方法,type属性必需,表Action的名称,其他key为携带信息,如:{ type:'ADD_TODO',text:'old value' }
      Action 创建函数: 生成 action 的方法,示例如下
    function makeAction(text) {
      return {
        type: ADD_TODO,
        text
      }
    }

    五、dispatch

      Dispatch:触发action,执行reducer,更新state

    store.dispatch(makeAction('new value'))

    六、subscribe(listener)

      监听器。每当 dispatch action 的时候就会执行,state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。

    // 注册监听器
    const unsubscribe=store.subscribe(()=>{console.log(store.getState())})
    // 解绑监听器
    unsubscribe()
  • 相关阅读:
    进程、线程、处理器间的关系研究(未完待续)
    Java运行原理研究(未完待续)
    libuv的多线程之间传递消息
    C++对象与其第一个非静态成员地址相同
    libuv移植到android
    pthread在Qt+Windows下的使用
    libuv在mingw下编译
    libxml2在mingw下编译
    libcurl在mingw下编译
    string的内存本质
  • 原文地址:https://www.cnblogs.com/jing-zhe/p/14518043.html
Copyright © 2011-2022 走看看