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的原理，希望这篇博客能让你学到一下。初次写博客，总觉得写的很多，但是写出来却有很少。希望以后慢慢进步