美文网首页
Redux 优化的一些思考

Redux 优化的一些思考

作者: vivaxy | 来源:发表于2017-04-17 13:09 被阅读221次

Redux 的书写分离

从 Redux 官方示例开始,我们就采用了 actions 和 reducers 分开文件夹来维护的思路。

但是在实际业务中,大部分场景下一个 action 触发的 reducer 是在一个子 reducer 下。

这里其实引入了 combineReducers 工具来分离大型的 store 数据。

然而饱受诟病的正是一个用户操作开发起来要写多个文件,component, action, reducer, api... 非常不方便,所以我们考虑将 action 和 reducer 合并在一个文件中书写。

于是我们移除 actions 和 reducers 文件夹,新建一个 redux 目录,里面放业务文件,如:

// newsList.js
import getNewsAPI from '../api/getNews';

import createReducer from '../lib/createReducer';
import processErrors from '../lib/processErrors';

import * as actionTypes from '../config/actionTypes';

const defaultState = {
    loading: false,
    list: [],
};

export default createReducer(defaultState, {
    [actionTypes.GET_MORE_NEWS]: (state, action) => {
        switch (action.status) {
            case 'loading':
                return { ...state, loading: true };
            case 'success':
                return { ...state, loading: false, list: [ ...state.list, ...action.payload ] };
            case 'error':
                return { ...state, loading: false };
        }
        return state;
    },
    [actionTypes.CLEAR_NEWS_LIST]: (state, action) => {
        return { ...state, list: [] };
    },
});

export const getMoreNews = () => {
    return async(dispatch) => {
        try {
            dispatch({
                type: actionTypes.GET_MORE_NEWS,
                status: 'loading',
            });
            const list = await getNewsAPI();
            dispatch({
                type: actionTypes.GET_MORE_NEWS,
                status: 'success',
                payload: list,
            });
        } catch (ex) {
            dispatch({
                type: actionTypes.GET_MORE_NEWS,
                status: 'error',
            });
            processErrors(ex);
        }
    };
};

export const clearNewsList = () => {
    return {
        type: types.CLEAR_NEWS_LIST,
    };
};

这里我们利用 export default 和 export cont 来区分 reducer 和 action,外部使用 reducer 时 import newsListReducers from './newsList'; 得到的 newsListReducers 是一个方法,并不包含 getMoreNewsclearNewsList 两个方法,比较纯净。

同时使用 action 时通过 import { getMoreNews, clearNewsList } from '../redux/newsList'; 拿到 function。

action 和 reducer 的对应关系

action 和 reducer 并不一定是一一对应的,部分场景下一个 action 可以触发多个 reducer 的处理。

因此 actionTypes 定义在 config 文件中作为常量管理可以方便在多个文件中使用。

redux-thunk 的 dispatch 并不一定是必须的

在上面的例子中,我们试用了 redux-thunk 中间件来支持异步 action,并且推迟 action 的执行。有些人会以为这里写同步 action 的时候也需要嵌套一层 dispatch

export const clearNewsList = () => {
    return (dispatch) => {
        dispatch({
            type: types.CLEAR_NEWS_LIST,
        });
    };
};

这种写法有点多余,我们可以直接 return action 对象。

Redux 的性能问题

很多人都认为 react 组件的 props 和 state 没有变更的时候不会执行组件的 render 方法,但是这个看法是不正确的。默认的,只要父组件 render 方法执行了,子组件的 render 是会执行的。

除非我们在子组件上实现了 shouldComponentUpdate 方法,这个可以避免作组件多余的 render 计算。react-redux 提供的 connect 正是实现了这个方法,因此 connect 用得越多,项目性能越好。

参考资料

相关文章

  • Redux 优化的一些思考

    Redux 的书写分离 从 Redux 官方示例开始,我们就采用了 actions 和 reducers 分开文件...

  • react-redux

    redux 全局状态管理 react-redux 优化模块 优化redux的使用过程 通过react-redux ...

  • Redux源码剖析

    前面写了《React组件性能优化》《Redux性能优化》《React-Redux性能优化》,但是都没有从这些框架的...

  • React-Redux性能优化

    前面写了两篇文章《React组件性能优化》《Redux性能优化》,分别针对React和Redux在使用上的性能优化...

  • 深入理解react+redux

    react+redux的一些思考 我们经常把react和redux放到一起.react大家都很熟悉,我们先简单的看...

  • React 容器组件与UI组件

    react 官方推出的 react-redux 插件对构建 react 项目中的 redux 进行了优化。 Rea...

  • 精读《重新思考 Redux》

    本周精读内容是 《重新思考 Redux》。 1 引言 《重新思考 Redux》是 rematch 作者 Shawn...

  • 说一说React和Redux你知道或者不知道的一些事情

    本文介绍一下自己在使用React和Redux过程中的一些思考,主要面向初学者。 1. 为什么要有redux 传统前...

  • 翻译|从提高性能角度优化react-redux store

    翻译|从提高性能角度优化react-redux store原文请见 译注:一旦在React的程序中引入Redux框...

  • 使用 Redux

    简单使用 优化 App.js index.js index.redux.js 更进一步, 让 Redux 可以处理...

网友评论

      本文标题:Redux 优化的一些思考

      本文链接:https://www.haomeiwen.com/subject/snrtzttx.html