zoukankan      html  css  js  c++  java
  • Redux的理解与使用

    一.什么是Redux?

    Redux是一个第三方状态管理的js库,它不仅仅可以适用于react框架,还可以用于其他的vue,auglar等框架。只不过react的生态中不包括一个状态管理的库而已,所以与react配合使用较为好。

    二.神魔时候要使用Redux来管理状态

    当我们多个组件共享状态的时候最好使用Redux来管理,方便组件间数据的共享。当咱们没有涉及组件间数据共享的时候尽量不要使用Redux

    二.Redux的三个核心要素

    1. actions

    actions可以说是一个让reducer执行不同函数的supporter, 它为reducer传入type来让reducer来执行不同的修改数据方式,并且把data传给reducer。所以actions的类型要是一个对象,并且咱们可以把actions抽离出去封装到一个工厂函数中如下:
    
    /*./redux/actions.js*/
    export const increament = (num)=> {
    	return {
    		type: 'INCREAMENT', //type属性由于要跟reducer中的相同所以我们可以把它抽离出去./redux/actions-type.js
    		data: num
    	}
    }
    

    2.reducer

    reduce是一个返回state的纯函数,里头要对state的值进行处理。
    
    /*./redux/reducer.js*/
    export default count = (state=0, action)=> {   //state需要在这里直接赋予默认值,因为每个状态都有初始状态
    switch (action.type) {
    	case "INCREMENT": 
    		return state + 1
    	default: 
    		return state
    }
    }
    

    3.Store

    store是一个连接state,reducer的仓库,其中提供了三种api供我们来操作
    
    • store.getState() : 用来获取仓库中数据,返回state
    • store.dispitch(action): 用来调用reducer来修改state, action需要传入的类型是一个对象
    • store.subscribe(()=> {}): 当store中的数据改变时会进行调用, 由于store中数据改变不会使页面重新渲染,所以我们在入口文件中可以把reactDom.render()放入其中来实现类似于数据响应式的作用。
    /*./redux/store.js*/
    import {createStore} from 'redux'
    import reducer from './reducer.js/
    export const count = createStore(reducer)
    //然后在index.js的入口文件中引入,通过属性赋值传递给需要的组件
    
  • 相关阅读:
    转:全面理解Javascript闭包和闭包的几种写法及用途
    VS2010 AnkhSvn
    silverlight 子UserControl获取父UserControl
    IIS相关
    (转)Javascript中console.log()用法
    (转)Sql Server 保留几位小数的两种做法
    asp.net Web API
    (转)C#中数组、ArrayList和List三者的区别
    PowerDesigner
    (转)jQuery.fn.extend与jQuery.extend到底区别在哪?
  • 原文地址:https://www.cnblogs.com/jackson1/p/13273863.html
Copyright © 2011-2022 走看看