REDUX入门

朴灿烈づ我的快乐病毒、 2022-05-19 09:44 221阅读 0赞

# **redux基础教程** #

阅读本文之前，你需要掌握一些基本的react知识，和node的基本环境。

### 什么是redux?    ###

简单来说，redux就是一个储存数据的仓库。

### 为什么要学习redux？ ###

当你打开这篇文章的时候，相信你的心中一定有自己的答案，但我还是要啰嗦一下。 学习redux是为了更加方便的管理和获取数据。

> 我们在用react写代码的时候，为了性能优化和代码规范，一般都会分成组件,但react默认的数据流为单向数据流,所以组件之间的通讯很不方便， 使用reduce之后，就是把所有的数据集中的放在了一个地方,我们就可以在任意组件中获取任意数据了。

## ##

### 如何下载？ ###

到你需要执行项目的文件夹的命令提示面板，执行命令**npm i redux -D**

### 如何开始使用？ ###

到这里，算是本篇教程的开始部分了，redux就是一个前端的热门框架,一共分为三部分 action reducers store 先看第一部分

**actions**

我们先创建一个文件，命名为actionType 里面写你将要执行的动作的类型，可能这么说有一点抽象。 我们以前写react的时候在this.state里面定义的是什么,就可以在actionType里面定义什么 比如：我们想要做一个分页器的功能,先思考一下我们需要储存哪些变量 1.一个总的数据,可能有30条，40条，甚至更多 2.一个我们展示的数据,可能是十条，五条，点击下面的按钮的时候展示的数据发生改变 3.最下面的页码的集合，应该是一个纯Number类型的，从1开始，依次递增的有固定长度的数组。 我们就在actionType里面定义得到这些变量的动作类型,在定义动作类型的时候尽量语义化一点，而且要以大写字母定义，下划线作为连接 变量会发生改变，但是动作类型不会发生改变，所以定义的时候我们直接选用了const来定义

const GET_ALL = 'GET_DATA';
    const GET_LIST = 'GET_LIST';
    const GTE_PAGE = 'GET_PAGE';

actionType这个文件的作用只是用来定义动作类型的,使用的时候我们需要在别的文件里面使用这些定义的动作类型,所以我们应该把这些动作 类型抛出去,在别的文件中可以访问然后把这个定义之后的常量抛出,因为我们等会要在别的地方使用这个常量

export const GET_ALL = 'GET_DATA';
    export const GET_LIST = 'GET_LIST';
    export const GTE_PAGE = 'GET_PAGE';

使用redux的目的就是为了管理数据,定义这个常量的名字也是为了得到数据,那么数据应该怎么给仓库呢？ 函数里面最方便的办法就是传参了,redux也是

这时候，需要一个新的文件了。 \#\#\#**reducers** 他的作用就是接受一组action和数据，然后返回新的数据 我们先来创建一个文件,命名为reducers 然后，引入我们需要使用的动作类型

import {GET_ALL,GET_LIST,GET_PAGE} from './actionType.js';

这个文件最主要的功能是为了帮忙整理数据,接收一state,之后返回一个state。 仓库要存储的时候，都会先到这个文件里面来转一圈,当没有数据的时候，就会使用这个文件里面的默认值 我们先把数据的默认值定义一下

let initstate = {
        all:[],
        list:[],
        page:[]
    }

之后开始进行数据的处理 进行数据处理的时候必须要知道两个参数 1.我的action(定义的动作类型)是什么？ 2.要接收的数据 所以这次我们以函数接收参数的方式来处理数据 定义一个函数，接受两个参数，第一个参数为redux内部自己接收的state，第二个参数为我们传递进去的一个对象 对象的type属性写我们要执行的动作类型,text属性是我们要传递给store的参数。 最后把已经改变过了的state抛出去，储存到仓库。

> 函数里面使用了switch语句是因为每次执行操作的时候，会把定义的函数都执行一遍，为了区分他们的动作类型，不至于每个数据找错自己储存的位置，一般我们在reducers里面定义的函数都是纯函数，所谓纯函数，就是返回结果只依赖它的参数，并且在执行过程没有副作 用的函数。我们赋值的时候为了不影响其他数据，引用类型数据的拷贝都选用深拷贝的方式赋值 let getAll = (state,action)\{ switch(action.type) \{ case GET\_ALL: state.all=\[...action.text\]; break; default: break; \}; return state.all; \}; let getList = (state,action)\{ switch(action.type) \{ case GET\_LIST: state.list=\[...action.text\]; break; default: break; \}; return state.list; \}; let getArr = (state,action)\{ switch(action.type) \{ case GET\_ARR: state.data=\[...action.text\]; break; default: break; \}; return state.data; \}; 观察一下上面这三个函数,他们的返回值分别是什么？ 如果action.type符合他们对应case的值,就会返回action.text;否则，就会返回state的默认值initstate的对应属性 所以上面的每一个函数获取的就是对应的initstate里面的每一项的值,我们需要把这些值放在一个对象里面构成新的数据,返回给我们的store;
> 
>

export default (state,action)=>{
        return {
            
        }
    }

如果刚开始没有数据的时候接收的就是默认值initstate的值 ，我们这个函数的主要作用就是为了给数据的data的属性赋值,先利用switch语句对action进行判断,如果是我们需要的action就开始进行赋值

前面说了，这个函数主要的功能是为了将数据传给仓库,那么他的返回值就必须是数据了,我们在定义数据的默认值的时候给了一个对象，所以返回的值 也要是一个对象，属性还要一一对应

export default (state = initstate,action){
        return {
            all:getAll(state,action),
            list:getList(state,action),
            arr:getArr(state,action)
        }
    }

我们抛出了一个和默认值属性一样的对象，这个对象中属性的值就是我们上面的函数调用之后的返回值

函数写到现在，剩下的东西已经很清晰明了了，在仓库里面引入这个文件就可以了 我们来建一个名为store的js文件，来进行最后一步的操作

import {createStore} from 'redux';
    import reducers from './reducers/reducers.js';
    let store = createStore(reducers);
    export default store;

createStore是redux封装好的一个方法，顾名思义，创建一个仓库，直接拿来用就好 里面的参数就是我们刚刚写好的要传入仓库中的文件了 然后抛出这个仓库就可以了

### 实际项目中如何使用？ ###

使用的时候。提前引入store就行了 直接引入使用就可以了

import store from './store.js';

store有两个比较常用的方法

dispatch

store.dispatch();传入数据,里面的参数是一个对象的形式，action和要传入的值 比如 store.dispatch(\{ type:'GET\_ALL', text:data \}) data就是我们要存入store的数据 这样就是把数据存在仓库里面了，这个项目中的任意组件就都可以直接得到他的数据了 怎么得到他的数据？ 那就是使用它的另一个超级常用的方法啦

getState

store.getState(); 直接打印他得到的就是全部的数据,就是我们之前定义的一个对象的形式 如果想要得到某一条的数据，比如我们刚刚储存进去的data 直接使用store.getState().all就可以得到刚刚储存的数据了。 是不是很简单 什么？

你没有明白，我们来从头再来一遍 我们最开始在actionType里面定义了几个我们需要用的动作类型,然后我们到了reducers文件里面， 给数据定义了一个默认值，写了一个当type类型全等于我们所定义的类型自后给数据赋值的一个函数， 这里要注意这个函数的返回值是一个属性的值，并非是一个对象 之后就是抛出一个函数啦，函数的返回值就是我们最终的数据,所以要和数据默认值的属性一一对应， 最后就是调用createStore，抛出，直接使用就可以了。

是不是觉得好麻烦,还记得我当初学redux的时候看到的一句话 当你不知道是否需要redux的时候，你就是不需要 这只是为了给大家演示写的最简单的一版，算是redux的入门吧