• Redux:action


    引入redux之后,代码中对组件state的更新变得规范而可控,不再是分散的一句句setState,而是将组件的state集合在一个单例store中,并以引用的方式获取各自的state。

    对于state的更新操作,也依赖一个名为action的js对象,该对象包含了该次更新的相关信息。对于store而言,action是外部信息注入的唯一途径,store调用api:store.dispatch()

    type属性:

        每个action必须有一个type属性,表示该次state更新属于哪种类型,值为字符量。除了type属性之外,action没有其他默认或强制的属性,完全由我们按需创建。文档只是建议我们给action携带尽量少的信息。

    Action Creators:

        redux中把构造action的函数称为action creator。其实就是个普通函数:

    1 function addTodo(text) {
    2   return {
    3     type: ADD_TODO,
    4     text
    5   }
    6 }

    在Flux中,有的构造函数在创建完action对象后,直接调用dispatch方法触发更新,redux中也有相同的实现:

    1 dispatch(addTodo(text))
    2 dispatch(completeTodo(index))

    上面两行代码可以再包装、完善一下:

    1 const boundAddTodo = text => dispatch(addTodo(text))
    2 const boundCompleteTodo = index => dispatch(completeTodo(index))

    以后直接调用上面代码,就能创建并执行某类型的state更新了。

    另,dispatch方法除了store.disptach(),还能通过

     react-redux's connect()

    以及bindActionCreators()方法将action creators 绑定到dispatch()的方式使用。这个以后再讨论。

    在进阶教程中会提到异步action async actions :如何处理ajax的响应以及在ajax控制流中构成建action creators。

    当我们的项目比较复杂时,可以把actions 和action creators放在另一个文件中:

     1 actions.js
     2 
     3 /*
     4  * action types
     5  */
     6 
     7 export const ADD_TODO = 'ADD_TODO'
     8 export const TOGGLE_TODO = 'TOGGLE_TODO'
     9 export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'
    10 
    11 /*
    12  * other constants
    13  */
    14 
    15 export const VisibilityFilters = {
    16   SHOW_ALL: 'SHOW_ALL',
    17   SHOW_COMPLETED: 'SHOW_COMPLETED',
    18   SHOW_ACTIVE: 'SHOW_ACTIVE'
    19 }
    20 
    21 /*
    22  * action creators
    23  */
    24 
    25 export function addTodo(text) {
    26   return { type: ADD_TODO, text }
    27 }
    28 
    29 export function toggleTodo(index) {
    30   return { type: TOGGLE_TODO, index }
    31 }
    32 
    33 export function setVisibilityFilter(filter) {
    34   return { type: SET_VISIBILITY_FILTER, filter }

       

  • 相关阅读:
    【PHP设计模式 08_CeLue.php】策略模式
    【PHP设计模式 07_ZeRenLian.php】责任链模式
    【PHP设计模式 06_GuanChaZhe.php】观察者模式
    【PHP设计模式 05_DanLi.php】单例模式
    【PHP设计模式 04_GongChang.php】 工厂方法
    【PHP设计模式 03_JianDanGongChang.php】 简单工厂
    【PHP设计模式 02_JieKou.php】面向接口开发
    区块链学习-开始
    erc721-165学习
    cryptopunks的代码解释
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7499637.html
Copyright © 2020-2023  润新知