Redux基本使用

1、什么是Redux

官方解释:Redux is a predictable state container for JavaScript apps. 意思就是Redux是js应用的 一种可预测的状态容器。其实可以理解为一口井,谁需要就可以从中提水

下面图展示的是redux原理图

 

 

2、为什么使用Redux

下面的图是不使用Redux和使用Redux时 父子组件之间的通信方式,其实就是跨级获取数据

3、怎么使用Redux

首先按照标准步骤需要创建一个redux文件夹,其中应包括三个文件,分别为store.js、reducer.js、action.js

如图所示:

store.js文件


import { createStore } from 'redux';
import reducer from "./reducer" //此处引用的为下面的reducer文件

export default createStore(reducer);

reducer.js文件

export default function add(prestate=0,action){
    switch(action.type){
        case "ADD":return action.data+prestate;
        case "DEC":return action.data-prestate;
        default:return prestate
}

注:此处prestate=0,是默认初始化,因为在初次渲染时,store就已经发送一次请求,type="@@init@@"因此默认值为0。并且reducer为纯函数。

action.js文件

export const action = {
  type: 'ADD',
  payload: '15'
};

export const action = {
  type: 'DEC',
  payload: '15'
};

(1)、首先说一下最重要的部分也就是store,包含了三个方法

  • store.getState()                            //从store获取数据

当前时刻的 State,可以通过store.getState()拿到。

state=store.getState()
  • store.dispatch()                             //分发action请求

store.dispatch()是 store 发出 action 的唯一方法。

store.dispatch({type:"xx",data:15});

dispatch发出的请求为对象,第一个属性为type,第二个属性为data

  • store.subscribe()                           //监听更新数据

此方法就是获取数据更新以后,页却不更新的原因解决办法

在index中待用即可

import store from "./store"

store.subscribe(()=>{
    ReactDOM.render(</app store={store}>,doucment.getElementById("root"))
}//此处为回调函数,回调函数中渲染DOM
)

注:全局监听并不会影响效率,因为react的diff算法不会重新渲染TDOM,所以说放心使用。

 

以上就是redux的基本使用和简介,目前在开发过程中会使用facebook已经打包好的react-redux。但是也要了解redux的原理,希望这篇博客能让你学到一下。初次写博客,总觉得写的很多,但是写出来却有很少。希望以后慢慢进步

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值