React: 研究Redux的使用

时间  2019-12-22 标签 react 研究 redux 使用

1、简介react

在上一篇文章中，大概讲了下Flux设计模式的使用，在末尾顺便提了一些基于Flux的脚本库，其中Redux已经毋庸置疑地成为了众多脚本库的翘楚之一。是的，Redux是基于Flux开发的，Redux库的尺寸很是小，代码量少，核心目的还是处理数据流变化的问题。Redux并不彻底是Flux，它只是类Flux的脚本库，它移除了Dispatcher这个概念，如今的结构是包含Store、Action、Action生成器、以及用于修改State的Action对象。在Redux中，对于State的管理采用了单个不可变对象来表示，同时还引入了Reducer纯函数来根据当前的State和Action返回一个新的State：(state, action) => newState。如今来对每个成分结构进行分析。数据库

 

2、Statenpm

 在传统的React开发中，将State分布到每个组件中基本上是通用的作法，这么作的好处是明显的，每一个State数据由本身的组件去管理，须要那个组件作修改就让对应的组件去处理，可是，随着数据的增长，弊端也是明显的，管理应用程序的总体State可能就变得异常困难，由于要考虑到每一个组件都将使用其内部的setState方法来改变自身的State，可能了解更新命令源也会变得更加复杂。然而，在Redux中则推荐将State尽可能存放到少数几个对象中，这中处理方式几乎成了一条规则。如今来对比这两种不一样的State管理分布，以下所示。能够发现Redux将全部的State数据都存储到了单个对象中，简化了在应用程序中查看和修改State的方式。编程


经过Redux，使得State管理与React彻底剥离了，Redux将会直接管理这些State。从图中能够看出，Redux Store中全部的数据都植根于一个对象：State树。单个对象中的每个键表示State树的一个分支。用图能够形象地表示以下：json

用代码表示以下：redux

//state_data.js

//存储的数据
//注意事项：后面本示例不处理kind对象，将subs补全为subjects
const state_data = {
    names:[
        {
            "name_id":"1",
            "name":"张三",
        },
        {
            "name_id":"2",
            "name":"李四",
        }
    ],
    subjects:[
        {
            "subject_id":"1",
            "subject":"数学",
        },
        {
            "subject_id":"2",
            "subject":"语文",
        }
    ],
    scores:[
        {
            "score_id":"1",
            "score": 90,
        },
        {
            "score_id":"2",
            "score": 95,
        }
    ]
};

 

3、Action设计模式

根据Redux的规则，在上面已经肯定了应用程序State的基本结构，数据都存放到了一个不可变的对象data中。不可变意味着data对象不可修改，此时只能经过总体替换的方式来更新data对象进而达到更新State的目的。在前面Flux中说过，Action是更新应用程序State的惟一方式，在Redux也是如此。对于State的每一种更新行为Action都是抽象的，开发者能够确认完Action后将其动词化。它的类型是字符串，一般由大写字母表示，并用下划线代替空格，作到见名知意为好。以下所示：数组

//action_constants.js

//将Action行为动词化
const action_constants = {
    ADD_NAME:"ADD_NAME",                //添加姓名
    DELETE_NAME:"DELETE_NAME",          //删除姓名
    UPDATE_NAME:"UPDATE_NAME",          //更新姓名
    ADD_SUBJECT:"ADD_SUBJECT",          //添加科目
    DELETE_SUBJECT:"DELETE_SUBJECT",    //删除科目
    UPDATE_SUBJECT:"UPDATE_SUBJECT",    //更新科目
    ADD_SCORE:"ADD_SCORE",              //添加分数
    DELETE_SCORE:"DELETE_SCORE",        //删除分数
    UPDATE_SCORE:"UPDATE_SCORE"         //更新分数
};

export default action_constants;

一个Action就是一个JavaScript对象，它至少包含一个类型字段，以下所示：网络

//一个Action对象
{ type:"ADD_NAME" }

有的时候，开发者会把Action的type拼写错误，毕竟是字符串。为了解决这个问题，JavaScript的常量就派上了用场。将Action定义为常量可使得开发者充分利用IDE智能提示和代码补全功能。这个一个预防失误的不错选择。以下所示：app

//使用常量后，IDE都会有提示，开发很是方便
import C from './action_constants'

{
    type: C.ADD_NAME
}
{
    type: C.UPDATE_NAME
}

Action是以JavaScript语法的形式提供更新某个State所需的一系列指令的，例如某些数据须要更新，某些数据须要删除，某些数据须要添加等等，这些数据多是一个对象，也多是一个字段，这类的数据统称为Action的有效载荷数据。Action是小而美的数据包，可以方便地告知Redux如何修改State。举例以下所示，能够发现第一个删除行为的Action的有效载荷数据不包括name字段。

// 删除姓名的Action对象
// type是必需要的，以便确认什么行为
// name_id也是必需要的，以便确认删除目标
{
    type: C.UPDATE_DELETE,
    name_id:"1"
}


// 添加姓名的Action对象
// type是必需要的，以便确认什么行为
// name_id也是必需要的，新的标识
// name也是必需要的，新的姓名
{
    type: C.ADD_NAME,
    name_id:"3",
    name:"王五"
}

在Redux中，当经过store.dispatch()函数给每种Action派发执行时，都须要开发者去定义一个Action对象，这个过程虽然说不难可是也是复杂的。开发者彻底能够经过给每种Action类型添加一个Action生成器来简化Action的逻辑。以下所示：

//action_builder.js

import C from './action_constants'

//生成一个”添加姓名“的action
export const addName = (new_name_id, new_name) =>
    ({
        type:C.ADD_NAME,
        name_id:new_name_id
        name:new_name
    });

//生成一个”删除姓名“的action
export const deleteName = (name_id) =>
    ({
        type:C.DELETE_NAME,
        name_id
    });

//生成一个”更新姓名“的action
export const updateName = (name_id, name) =>
    ({
        type:C.UPDATE_NAME,
        name_id,
        name
    });

 

 四、Reducer

虽然如今整个State树都是存储到了单个对象中，可是它的模块化程度仍是不高，例如开发者想用模块化的方式描述对象。Redux就是经过函数来实现模块化的，函数被用来更新部分State树中的内容，这些函数被称为Reducer。它会把当前的State和Action当作参数，而后返回一个新的State对象。Reducer的主要目的就是实现State树中部分数据的更新，包括叶子节点和分支。每个Reducer都是模块化的体现，而后能够将多个Reducer合成一个Reducer，来处理应用程序中任意给定的Action的全部State更新。如图所示：names数组的Reducer处理的Action包括ADDNAME、DELETENAME、UPDATENAME。name对象的Reducer处理的Action包括ADDNAME和UPDATENAME。能够看出，接收的参数为数组，返回的也是数组，接收的参数是对象返回的也是一个对象。

每个Reducer均可以被合成或者组合成单个的Reducer函数，以便在Store中使用。例如names数组的Reducer是由name对象的Reducer合成的。正是这种合成和单个函数的特色，提供了一种能够更新整个State树和处理任何接收的Action的方式。注意，Reducer合成不是必需的，这是一种推荐作法，咱们也能够建立一个Reducer函数来处理全部的Action，可是这样就会失去模块化和函数式编程带来的优点。 用代码表示以下：

//action_reducer.js

import C from './action_constants'

//处理name对象的action的Reducer函数
export const name = (state={}, action) => {
    
    switch (action.type) {
        case C.ADD_NAME:
            return {
                name_id:action.name_id,
                name:action.name
            };
        case C.UPDATE_NAME:
            return (state.name_id !== action.name_id) ? state : {
                ...state,
                name:action.name
            };
        default:
            return state;
    }
};

//处理names数组的action的Reducer函数
export const names = (state=[], action) => {
    
    switch (action.type) {
        case C.ADD_NAME:
            return [
                ...state,
                name({}, action)
            ];
        case C.DELETE_NAME:
            return state.filter(
                name => name.name_id !== action.name_id
            );
        case C.UPDATE_NAME:
            return state.map(
                name => name(name, action)
            );
        default:
            return state;
    }
};

  

五、Store

同Flux的工做原理同样，Store负责完成应用程序中State数据的保存和处理全部State更新的地方。不一样的是，Flux设计模式中能够支持多个Store共存，每个Store只专一于特定的数据集。而Redux中只有一个Store，它会把当前的State和Action传递给每个单独的Reducer函数进而来更新State。在使用Redux以前，须要在项目中安装和配置Redux，步骤以下：

一、npm安装redux相关组件【开发者根据须要安装须要的组件】

// redux: 本地数据存储空间，至关于本地数据库 
// react-redux: 帮助完成数据订阅 
// redux-thunk：帮助实现异步action
npm install --save redux react-redux redux-thunk

// redux-logger: redux的日志中间件
npm install --save-dev redux-logger

 

二、yarn配置package.json包

Redux提供了关于Store的相关API，例如能够经过Redux的createStore函数经过传入参数State或Reducer建立Store，Redux还有一个专门的combineReducers函数来将全部的Reducer构形成单个Reducer。如咱们所知，修改用户应用程序State的惟一方式就是经过Store分发Action。Store提供了一个getState函数获取保存到State数据。Store包含一个dispatch函数，能够接收Action做为参数，当用户经过Store分发某个Action时，该Action将会被分配到与之相应的Reducer上，而后State就被更新了。Store还容许使用subscribe函数订阅每次分发完一个Action后被触发的句柄函数，固然这个订阅函数会返回一个退订函数，能够用来退订以前订阅的监听器。相关API以下所示：

//建立Store
export interface StoreCreator {
  <S, A extends Action, Ext, StateExt>(
    reducer: Reducer<S, A>,
    enhancer?: StoreEnhancer<Ext, StateExt>
  ): Store<S & StateExt, A> & Ext
  <S, A extends Action, Ext, StateExt>(
    reducer: Reducer<S, A>,
    preloadedState?: DeepPartial<S>,
    enhancer?: StoreEnhancer<Ext>
  ): Store<S & StateExt, A> & Ext
}
export const createStore: StoreCreator

//combineReducers合成函数
export function combineReducers<S>(
  reducers: ReducersMapObject<S, any>
): Reducer<S>
export function combineReducers<S, A extends Action = AnyAction>(
  reducers: ReducersMapObject<S, A>
): Reducer<S, A>

//获取State数据
getState(): S

//集成自flux中的Dispatch，拥有Dispatch的全部公共函数
dispatch: Dispatch<A>

//订阅函数，返回值是退订函数
subscribe(listener: () => void): Unsubscribe

顺便提一下，Redux不只提供了combineReducers函数来合成Reducer，还提供了compose函数。 使用compose函数也能够将若干函数合成单个函数。它的功能很健壮，合成的函数执行的顺序是从右往左执行的。举例以下：

import { compose } from 'redux'
//需求：将scores数组的分数转成列表而后使用逗号拼接成字符串并打印

//一、通常写法
const scoreListString = store.getState().scores.map(s => s.score).join(",");
console.log(scoreListString);

//二、使用compose合成单函数
//首先，从State中获取scores
//而后，绑定scores的映射函数map
//接着，生成一个score数组scoreList
//而后，使用逗号拼接字符串scoreListString
//最后，在控制台上打印结果
const print = compose(
    scoreListString => console.log(scoreListString),
    scoreList => scoreList.join(","),
    map => map(s => s.score),
    scores => scores.map.bind(scores),
    state => state.scores
);
print(store.getState());

 

六、中间件

Redux还提供了中间件这个概念，它负责Store的分发管道功能。在Redux中，中间件是由在分发某个Action过程当中一系列顺序执行的若干高阶函数构成的。这个高阶函数容许用户在某个Action被分发以前或以后，以及State被更新后，插入某些功能。每一个中间件函数都是顺序执行的，它们拥有访问Action、dispatch函数，以及下一个next函数的权限。next函数将会触发更新操做。在next函数被调用以前，State就会被更新。网络上介绍的流程图大体以下：

如今，咱们就在Store中使用中间件 。首先建立一个storeFactory工厂类，这个类专门用来管理Store的建立过程。而后，经过这个工厂类接着建立一个包含了日志记录的中间件的Store。storeFactory工厂类所在文件包含一个函数，并导出它，该函数用来对建立Store所需的数据进行分组。当须要用到Store时，直接经过这个函数进行建立便可：

//使用工厂类建立store
const store = storeFactory(initData);

在storeFactory类中插入中间件，须要用到redux中的applyMiddleware应用中间件函数。定义和插入logger中间件，以下所示：

//store_factory.js

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { name, names, subject, subjects, score, scores} from "./action_reducer";
import state_data from "./state_data";

//建立日志中间件
const logger = store => next => action => {
    let result;
    console.groupCollapsed("dispatching", action.type);
    console.log('prev state', store.getState());
    console.log('action', action);
    result = next(action);
    console.log('next state', store.getState());
    console.groupEnd();
};

//建立store工厂函数
//0. 设置应用中间件applyMiddleware函数
//1. 插入中间件logger
//2. 合成Reducer函数
const storeFactory = (stateData=state_data) => 
    applyMiddleware(logger)(createStore)(
        combineReducers({name,subject,score,names,subjects,scores}),
        state_data
    )

export default storeFactory

分析结果：在logger中，在该Action被分发以前，打开了一个新的控制台分组console.groupCollapsed，记录了当前的State和Action。触发了next管道上的Action顺序执行中间件函数，最终到达Reducer。此时的State已经更新了，所以咱们记录被修改过的State，最后在控制台上分组显示。console.groupEnd()表明中分组结束。

 

七、综合应用

下面是完整的代码文件，以下所示： 

一、State数据文件：state_data.js

//存储的数据
const state_data = {
    names:[
        {
            "name_id":"1",
            "name":"张三",
        },
        {
            "name_id":"2",
            "name":"李四",
        }
    ],
    subjects:[
        {
            "subject_id":"1",
            "subject":"数学",
        },
        {
            "subject_id":"2",
            "subject":"语文",
        }
    ],
    scores:[
        {
            "score_id":"1",
            "score": 90,
        },
        {
            "score_id":"2",
            "score": 95,
        }
    ]
};

export default state_data;
View Code

二、Action动词文件：action_constants.js

//定义action类型的动词
const action_constants = {
    ADD_NAME:"ADD_NAME",                //添加姓名
    DELETE_NAME:"DELETE_NAME",          //删除姓名
    UPDATE_NAME:"UPDATE_NAME",          //更新姓名
    ADD_SUBJECT:"ADD_SUBJECT",          //添加科目
    DELETE_SUBJECT:"DELETE_SUBJECT",    //删除科目
    UPDATE_SUBJECT:"UPDATE_SUBJECT",    //更新科目
    ADD_SCORE:"ADD_SCORE",              //添加分数
    DELETE_SCORE:"DELETE_SCORE",        //删除分数
    UPDATE_SCORE:"UPDATE_SCORE"         //更新分数
};

export default action_constants;
View Code

三、Action生成器文件：action_builder.js

import C from './action_constants'

//生成一个"添加姓名"的action
export const addName = (new_name_id, new_name) =>
    ({
        type:C.ADD_NAME,
        name_id:new_name_id,
        name:new_name
    });

//生成一个"删除姓名"的action
export const deleteName = (name_id) =>
    ({
        type:C.DELETE_NAME,
        name_id
    });

//生成一个"更新姓名"的action
export const updateName = (name_id, name) =>
    ({
        type:C.UPDATE_NAME,
        name_id,
        name
    });

//生成一个"添加科目"的action
export const addSubject = (new_subject_id, new_subject) =>
    ({
        type:C.ADD_SUBJECT,
        subject_id:new_subject_id,
        subject:new_subject
    });

//生成一个"删除科目"的action
export const deleteSubject = (subject_id) =>
    ({
        type:C.DELETE_SUBJECT,
        subject_id
    });

//生成一个"更新科目"的action
export const updateSubject = (subject_id, subject) =>
    ({
        type:C.UPDATE_SUBJECT,
        subject_id,
        subject
    });

//生成一个"添加分数"的action
export const addScore = (new_score_id, new_score) =>
    ({
        type:C.ADD_SCORE,
        score_id:new_score_id,
        score:new_score
    });

//生成一个"删除分数"的action
export const deleteScore = (score_id) =>
    ({
        type:C.DELETE_SCORE,
        score_id
    });

//生成一个"更新分数"的action
export const updateScore = (score_id, score) =>
    ({
        type:C.UPDATE_SCORE,
        score_id,
        score
    });
View Code 

四、Reducer函数文件：action_reducer.js

import C from './action_constants'

//处理name对象的action的Reducer函数
export const name = (state={}, action) => {

    switch (action.type) {
        case C.ADD_NAME:
            return {
                name_id:action.name_id,
                name:action.name
            };
        case C.UPDATE_NAME:
            return (state.name_id !== action.name_id) ? state : {
                ...state,
                name:action.name
            };
        default:
            return state;
    }
};


//处理names数组的action的Reducer函数
export const names = (state=[], action) => {

    switch (action.type) {
        case C.ADD_NAME:
            return [
                ...state,
                name({}, action)
            ];
        case C.DELETE_NAME:
            return state.filter(
                name => name.name_id !== action.name_id
            );
        case C.UPDATE_NAME:
            return state.map(
                nameObj => name(nameObj, action)
            );
        default:
            return state;
    }
};

//处理subject对象的action的Reducer函数
export const subject = (state={}, action) => {

    switch (action.type) {
        case C.ADD_SUBJECT:
            return {
                subject_id:action.subject_id,
                subject:action.subject
            };
        case C.UPDATE_SUBJECT:
            return (state.subject_id !== action.subject_id) ? state : {
                ...state,
                subject:action.subject
            };
        default:
            return state;
    }
};

//处理subjects数组的action的Reducer函数
export const subjects = (state=[], action) => {

    switch (action.type) {
        case C.ADD_SUBJECT:
            return [
                ...state,
                subject({}, action)
            ];
        case C.DELETE_SUBJECT:
            return state.filter(
                subject => subject.subject_id !== action.subject_id
            );
        case C.UPDATE_SUBJECT:
            return state.map(
                subjectObj => subject(subjectObj, action)
            );
        default:
            return state;
    }
};

//处理score对象的action的Reducer函数
export const score = (state={}, action) => {

    switch (action.type) {
        case C.ADD_SCORE:
            return {
                score_id:action.score_id,
                score:action.score
            };
        case C.UPDATE_SCORE:
            return (state.score_id !== action.score_id) ? state : {
                ...state,
                score:action.score
            };
        default:
            return state;
    }
};

//处理scores数组的action的Reducer函数
export const scores = (state=[], action) => {

    switch (action.type) {
        case C.ADD_SCORE:
            return [
                ...state,
                score({}, action)
            ];
        case C.DELETE_SCORE:
            return state.filter(
                score => score.score_id !== action.score_id
            );
        case C.UPDATE_SCORE:
            return state.map(
                scoreObj => score(scoreObj, action)
            );
        default:
            return state;
    }
};
View Code 

五、Store工厂类文件：store_factory.js

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { name, names, subject, subjects, score, scores} from "./action_reducer";
import state_data from "./state_data";

//建立日志中间件
const logger = store => next => action => {
    console.groupCollapsed("dispatching", action.type);
    console.log('prev state:', store.getState());
    console.log('action:', action);
    next(action);
    console.log('next state:', store.getState());
    console.groupEnd();
};

//建立store工厂函数
//0. 设置应用中间件applyMiddleware函数
//1. 插入中间件logger
//2. 合成Reducer函数
const storeFactory = (stateData=state_data) =>
    applyMiddleware(logger)(createStore)(
        combineReducers({name, names, subject, subjects, score, scores}),
        state_data
    )

export default storeFactory;
View Code

 

下面是测试代码，以下所示：

一、获取state数据

//获取state数据
import state_data from "./redux/state_data";

console.log("1————state_data:",state_data);

二、手动建立action，action中至少有一个type字段用于区分类别

//手动建立action，action中至少有一个type字段用于区分类别
import C from './redux/action_constants'

const manually_addName_Action = { type: C.ADD_NAME, name_id:"3", name:"王五"};
const manually_deleteName_Action = { type: C.DELETE_NAME, name_id:"2"};
const manually_updateName_Action = { type: C.UPDATE_NAME, name_id:"1", name:"赵六"};
console.log("manually_addName_Action:", manually_addName_Action);
console.log("manually_deleteName_Action:", manually_deleteName_Action);
console.log("manually_updateName_Action:", manually_updateName_Action);

const manually_addSubject_Action = { type: C.ADD_SUBJECT, subject_id:"3", subject:"地理"};
const manually_deleteSubject_Action = { type: C.DELETE_SUBJECT, subject_id:"2"};
const manually_updateSubject_Action = { type: C.UPDATE_SUBJECT, subject_id:"1", subject:"政治"};
console.log("manually_addSubject_Action:", manually_addSubject_Action);
console.log("manually_deleteSubject_Action:", manually_deleteSubject_Action);
console.log("manually_updateSubject_Action:", manually_updateSubject_Action);

const manually_addScore_Action = { type: C.ADD_SCORE, score_id:"3", score:50};
const manually_deleteScore_Action = { type: C.DELETE_SCORE, score_id:"2"};
const manually_updateScore_Action = { type: C.UPDATE_SCORE, score_id:"1", score:100};
console.log("manually_addScore_Action:", manually_addScore_Action);
console.log("manually_deleteScore_Action:", manually_deleteScore_Action);
console.log("manually_updateScore_Action:", manually_updateScore_Action);

三、使用生成器建立action

//使用生成器建立action
import {addName, deleteName, updateName, 
        addSubject, deleteSubject, updateSubject, 
        addScore, deleteScore, updateScore} from "./redux/action_builder";

const auto_addName_Action = addName("3","王五");
const auto_deleteName_Action = deleteName("2");
const auto_updateName_Action = updateName("1","赵六");
console.log("auto_addName_Action:", auto_addName_Action);
console.log("auto_deleteName_Action:", auto_deleteName_Action);
console.log("auto_updateName_Action:", auto_updateName_Action);

const auto_addSubject_Action = addSubject("3","地理");
const auto_deleteSubject_Action = deleteSubject("3");
const auto_updateSubject_Action = updateSubject("1","政治");
console.log("auto_addSubject_Action:", auto_addSubject_Action);
console.log("auto_deleteSubject_Action:", auto_deleteSubject_Action);
console.log("auto_updateSubject_Action:", auto_updateSubject_Action);

const auto_addScore_Action =  addScore("3", 50);
const auto_deleteScore_Action = deleteScore("3");
const auto_updateScore_Action = updateScore("1", 100);
console.log("auto_addScore_Action:", auto_addScore_Action);
console.log("auto_deleteScore_Action:", auto_deleteScore_Action);
console.log("auto_updateScore_Action:", auto_updateScore_Action);

四、Reducer函数，模块化

//打印对象的Reducer和数组的Reducer
import { name, subject, score, names, subjects, scores } from "./redux/action_reducer";

console.log("name_reducer:",name);
console.log("subject_reducer:",subject);
console.log("score_reducer:",score);
console.log("names_reducer:",names);
console.log("subjects_reducer:",subjects);
console.log("scores_reducer:",scores);

 

五、合成多个Reducer成单个Reducer

// 合成多个Reducer为单个Reducer
import {combineReducers} from "redux";

const combineReducer = combineReducers(
    { name, subject, score, names, subjects, scores});
console.log("combineReducer:",combineReducer);

六、定义store，分派action，观察state数据的变化

// 定义store，分派action
import {createStore} from "redux";

const store = createStore(combineReducer, state_data);
console.log("store:",store);

store.dispatch(auto_addName_Action);
console.log("2————state_data:",store.getState());

七、插入中间件，在控制台分组中观察state数据变化以及logger打印插件的结果

//经过类方法建立store
import storeFactory from "./redux/store_factory";

const store = storeFactory();
console.log("store:", store);

//派发Action
store.dispatch(auto_addName_Action);
console.log("3————state_data:",store.getState());

store.dispatch(auto_deleteName_Action);
console.log("4————state_data:",store.getState());

store.dispatch(auto_updateName_Action);
console.log("5————state_data:",store.getState());

联系我们 沪ICP备13005482号-10