zoukankan      html  css  js  c++  java
  • redux一些自习时候自己写的的单词

    setState:设置状态

    render:渲染,挂载

    dispatchEvent : 派发事件

    dispatch:分发,派遣;库里的一个方法,简而言之相当于一个actions和reducer监听方法更新 state

    provider:提供者

    combine :合并

    reduce : 减少,降低,使处于,把。。。分解

    loadable:可加载模块

    action:动作,方法,代表用户的操作, 我们在完善action的属性,除了type属性唯一(大写),都可以自定义

    reducer:缩减 (我们用来写方法的)因为 action 对象各种各样,每种对应某个 case ,但最后都汇总到 state 对象中,从多到一,这是一个减少( reduce )的过程,所以完成这个过程的函数叫 reducer。reducer一定要保持纯净。只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。

    return {
    ...state,
    userName: action.payload
    }

    increment:增加

    decrement:缩减

    connect:链接,关联

    paylod:有效负载

    createStore:创建仓库(redux库)

    counte:计算

    mapStateToProps: 映射分发数据,从Store中读取状态: 容器组件向store声明需要的state的地方,因为我们的store是整个应用只有一份,根据redux的思想通过context可以保证每一个组件都可以从context中获取到store,不需 要一级一级的从顶层传递下来

    mapDispatchToProps:映射分发方法:意义类比上面

    combineRedusers: 所做的只是生成一个函数,这个函数来调用你的一系列 reducer,每个 reducer 筛选出 state 中的一部分数据并处理,然后这个生成的函数再将所有 reducer 的结果合并成一个大的对象。

    1,安装包redux 有时候还需要绑定 react-redux (react绑定库) 和 (redux-devtools) 开发者工具

    2, 创建两个文件夹分别创建index,js
    (1)actions 和 reducers 一个放方法,一个放数据
    (2)将这两个文件关联起来 在app的index.js里,
    引入Provider从react-redux里
    引入createStore从redux里
    从reducers里引入rootReducer

    3,创建库store = createStore(rootReducer) 我们用创建库方法来以存放应用中所有的 state

    4.我们创建了一个Hello模块来给大家展示redux
    创建Hello模块将App标签包裹,但是!!1
    我们用Provider组件将return出来的东西包裹,
    connect方法生成容器组件以后,需要让容器组件拿到state对象,才能生成 UI 组件的参数。
    这样,0App的所有子组件就默认都可以拿到state了。
    同时,我们直接渲染到root根节点的App也就改成了Hello

    5.reducer的index里,从包里拿到 redux 里的 combineReducer(合并reducer方法)
    再将reducer所有文件引入,集体抛出

    import {combineReducers} from "redux"
    import counter from './counter'
    export default combineReducers({
    counter,
    })

    6、在reduers的其他文件里面呢,就是建立我们的数据,然后抛出库以及操作

    export default (state = initialState,action) => {
    switch (action.type){
    case 'INCREMENT':
    return {
    ...state,//拷贝一下,因为不想改变原始数据
    num:state.num+1
    }
    default:
    return state
    }
    }

    7,actions里面的 index 添加

    import * as counterCreator from './counter'
    export {
    counterCreator
    }


    8. actions里面的的counter文件里面写
    export function increment(){ //设置一个默认方法叫做增加
    return {
    type:'INCREMENT' //返回type type大写,与方法名匹配
    }
    }

    9.最后我们主界面的代码

    //在对应的包里拿到高阶方法 connet
    import { connect } from 'react-redux'
    import { counterCreator } from '../actions'

    //定义 mapStateToProps 和 mapDispatchToProps两个方法
    //返回的数据
    const mapStateToProps = (state) => {
    return {
    $$counter: state.counter.num
    }
    }
    const mapDispatchToProps = (dispatch) => ({
    increment: () => dispatch(counterCreator.increment())
    })
    export default connect(
    mapStateToProps ,
    mapDispatchoProps
    )(主界面的组件名)

  • 相关阅读:
    《面向对象编程》c++ primer 第15章
    extern的作用(综合网络)
    C程序内存区域分配(5个段作用)
    鼓舞自己的名言
    快速指数算法 和 求逆元算法
    HP Xeon 55xx上GPU的带宽问题
    Ubuntu12.04 安装ibusfbterm0.9.1
    Win7下读写Ext2/Ext3/Ext4文件系统
    fbv安装 为console添加背景图片
    CentOS6/7安装fcitx4.2.5
  • 原文地址:https://www.cnblogs.com/GGbondLearn/p/12176807.html
Copyright © 2011-2022 走看看