zoukankan      html  css  js  c++  java
  • 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 }

       

  • 相关阅读:
    POJ 1141 Brackets Sequence (区间DP)
    UVaLive 6585 && Gym 100299F Draughts (暴力+回溯)
    UVaLive 6950 && Gym 100299K Digraphs (DFS找环或者是找最长链)
    UVaLive 6588 && Gym 100299I (贪心+构造)
    UVa 1611 Crane (构造+贪心)
    Gym 100299C && UVaLive 6582 Magical GCD (暴力+数论)
    UVa 1642 Magical GCD (暴力+数论)
    UVaLive 6591 && Gym 100299L Bus (水题)
    UVaLive 6581 && Gym 100299B What does the fox say? (模拟+STL)
    HDU 5898 odd-even number (数位DP)
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7499637.html
Copyright © 2011-2022 走看看