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
    )(主界面的组件名)

  • 相关阅读:
    tar命令,vi编辑器
    Linux命令、权限
    Color Transfer between Images code实现
    利用Eclipse使用Java OpenCV(Using OpenCV Java with Eclipse)
    Matrix Factorization SVD 矩阵分解
    ZOJ Problem Set
    Machine Learning
    ZOJ Problem Set
    ZOJ Problem Set
    ZOJ Problem Set
  • 原文地址:https://www.cnblogs.com/GGbondLearn/p/12176807.html
Copyright © 2011-2022 走看看