上节课我们介绍了纯函数的概念，这节课我们来进入redux的最后一个阶段，就是查漏补缺，我们把之前那些写的不规范的都给修改一下，大家可以酌情跳过这一节

回顾

在开始这节课的内容之前，我们来对上节课的内容来做一个简单的回顾：

  • redux中的reducer必须是纯函数
  • 纯函数中不得执行任何有副作用或不纯的函数
  • 纯函数中不许修改参数数据

以上便是上节课的内容，接下来我们来开始我们这节课的内容

概述

这节课我们没有什么重要的知识点，我们只是把之前不规范的地方改一下，我们就不多赘述了，直接贴代码了。

汇总reducers

 // redux/reducers/index.js
import { combineReducers } from 'redux';
import sum from './sum';
import person from './person';

export default combineReducers({sum, person})

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

export default createStore(reducers, applyMiddleware(thunk));

我来看上面这段代码，如果说我们项目中有 40 多个reducer，那么就要在store里面引入 40 多次，这也太麻烦了，所以我们都是单独用一个文件来引入并汇总然后传给store

精简action

import { INCREMENT, DECREMENT } from "../constant"

export const increment = data => ({ type: INCREMENT, data });
export const decrement = data => ({ type: DECREMENT, data });
export const asyncIncrement = (data, time) => {
  return dispatch => setTimeout(() => {
    dispatch(increment(data))
  }, time);
}

我们在这里是不是直接把之前的createXxxxxAction直接简写一下啊？我们都把action的文件全都放在actions文件夹下了，没必要在写这么多废话了啊。

精简容器组件

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { increment, decrement, asyncIncrement } from '../../redux/actions/sum';

class Sum extends Component {...}

export default connect(
  state => state,
  { increment, decrement, asyncIncrement }
)(Sum);

我们都把action的函数名改了，那么在传的时候直接触发对象简写方式就行了啊

以上便是对整个项目的精简

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/redux_final/