手记

使用React构建精简版本掘金(五)

距离上篇文章已经过去了大半个月,本来打算只更新代码,最后还是决定把做的过程中遇到的问题记录出来,说不定就可以帮助一些同学,也算是幸事,如果没有,那就当作自己梳理知识点吧!

该篇文章主要讲述以下知识点:

  • 如何mock数据
  • React组件中修改Redux中的数据

mock数据

有三种方式:

  • 利用node搭服务,mock数据
  • 利用现成网上mock服务,比如easy mock
  • 本地json数据模拟请求

介绍下本地数据模拟请求,利用axios请求数据:

import axios from 'axios';

const BaseUrl='./mock/homeData/';
const getHome=()=>{
    return axios.get(BaseUrl+'home.json').then(res=>{
        return res.data
    })
}

const getArticleList=()=>{
    return axios.get(BaseUrl+'articleList.json').then(res=>{
        return res.data
    })
}

export { getHome,getArticleList }

本地json数据存放位置如下

React组件中修改Redux中的数据

定义好state,reducer

//userReducer.js

// 1.定义默认数据
let initialState = {
    userId:'',
    userName:'',//实际项目与此不同
    userImage: '',
    userDesc:''
}

// action creators
export const actions = {
    login: (userInfo) => {
        return {type: 'CHANGE_USER',userName: userInfo.username,userId:userInfo.userId}
    },
    logout:()=>{
        return {type:'LOGOUT'}
    }
};

// 2.Reducer
const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_USERIMAGE':
            return { ...state, userImage: action.userImage }
        case 'CHANGE_USERID':
            return { ...state,userId:action.userId}
        case 'CHANGE_USER':
            return { ...state,userName:action.userName,userId:action.userId}
        case 'LOGOUT':
            return {...state,userName:'',userId:''}
        default:
            return state
    }
}
// 3.导出
export default userReducer;

在组件中操作修改state

...
this.props.login({username:username,userId:userId});//修改存储在redux中的用户信息
...
const mapStateToProps = (state, ownProps) => {
  return {
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    login: authActions.login
  },dispatch);
}

Login=connect(mapStateToProps,mapDispatchToProps)(Login)

export default Login;

Redux通过reducer解析action。reducer是一个普通的js函数,接受action作为参数,然后返回一个新的state。

三大原则

  • 唯一数据源
  • 保持state状态只读
  • state的改变必须通过纯函数完成

Redux

Redux应用只维护一个全局的状态对象,存在Redux的store中。程序任何时候都不能直接去修改状态state,如果需要修改state,必须发送一个action,通过action去描述如何修改state。action描述了改变state的意图,真正对state作出修改的是reducer。reducer必须是纯函数,所以reducer在收到action后,不能直接去修改原来的状态state,而是应该创建一个新的状态对象返回。

纯函数需要满足两个条件:
(1)对于同样的参数值,函数返回结果总是相同的,就是函数结果不依赖任何在程序执行过程中可能改变的变量。
(2)函数的执行过程不会产生比的副作用,例如会修改外部对象,有时会去修改页面标题,这就是副作用。

数据流向的一个简单示意图,来自Flux官网

可以看出Redux应用的主要组成有action,reducer和store。

action

action是Redux中的信息载体,是store的唯一来源。把action发给store必须通过store中的dispach方法。其实action就是一个普通的js对象,但是每个action必须有一个type属性用来描述action类型,要做什么操作。除了type属性歪,action的结构完全由你决定,不过应该保证可以清晰描述使用场景。

function logout(info){
    return {
        type:'LOGOUT',
        info
    }
}

reducer

reducer根据action做出响应,决定如何修改应用状态state。其实在写reducer之前就应该设计好state。

state:

// 1.定义默认数据
let initialState = {
    userId:'',
    userName:'',//实际项目与此不同
    userImage: '',
    userDesc:''
}

reducer:

// 2.Reducer
const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_USERIMAGE':
            return { ...state, userImage: action.userImage }
        case 'CHANGE_USERID':
            return { ...state,userId:action.userId}
        case 'CHANGE_USER':
            return { ...state,userName:action.userName,userId:action.userId}
        case 'LOGOUT':
            return {...state,userName:'',userId:''}
        default:
            return state
    }
}

这里使用了ES6的扩展运算符(…)创建新的state对象,避免直接修改之前的state对象。

在实际项目中,可能会有很多reducer,就需要把reducer拆分保存在单独的文件中。Redux提供了一个combineReducers函数,用来合并reducer。

import {combineReducers} from 'redux';

import pageHeaderReducer from './pageHeader.js';
import userReducer from './userReducer';

const appReducer = combineReducers({
    pageHeaderReducer,
    userReducer,
});
export default appReducer;

store

store是Redux中的一个对象,作为action和reducer之间的一个桥梁。
作用:

  • 保存应用状态
  • 通过方法获取应用状态
  • 通过dispatch(action)发送更新状态的指令
  • 通过方法subscribe(listener)注册监听函数、监听状态的改变。

总结下Redux中的数据流过程:

  • (1)通过调用store.dispatch(action)。一个action描述了“发生了什么”的对象以及可能会携带一些参数。store.dispatch(action)可以在应用中任何位置调用。
  • (2)Redux的store调用reducer函数。store传递两个参数给reducer,分别是当前应用的状态和action,reducer必须是纯函数。
  • (3)根reducer可以把多个子reducer合并在一起,返回组成最终的应用状态。利用combineReducers进行组合。
  • (4)Redux的store保存根reducer返回的完整应用状态,这整个流程走完,应用状态才完成更新。

在React中使用Redux

基础安装使用方法已经在第一篇中做了介绍,此处重点介绍下connect中的mapStateToProps和mapDispatchToProps。

mapStateToProps

mapStateToProps是一个函数,从名字上看,该函数作用就是把state转换成props。state就是Redux store中保存的应用状态,会作为参数传递给mapStateToProps,props就是被连接展示组件的props。

const mapStateToProps = (state) => {
    return {
        userName:state.userReducer.userName,
        userImage:state.userReducer.userImage,
        userId:state.userReducer.userId
    }
}

当store中的state改变后,mapStateToProps就会重新执行,重新计算传递给展示组件的props,从而触发组件的重新渲染。

注意:store中的state改变一定会导致mapStateToProps重新执行,但却不一定会触发组件渲染render方法重新执行。如果mapStateToProps新返回的对象和之前的对象浅比较相等,组件的shouldComponentUpdate方法就会返回false,组件的render方法就不会被再次触发,这也是一个重要优化吧!

mapDispatchToProps

mapDispatchToProps接收store.dispatch方法作为参数,返回展示组件用来修改state的函数。

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
      getOrder: (data) => dispatch(actionCreator(data))
  }
}

另外一种写法,利用bindActionCreators

import { bindActionCreators } from "redux";

const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    getOrder: actionCreator.getOrder
  },dispatch);
}

bindActionCreators作用是将单个或多个ActionCreator转化为dispatch(action)的函数集合形式。个人感觉会内部自动注入dispatch,不用我们手动去dispatch。之后通过connect连接即可

const mapStateToProps = (state, ownProps) => {
  return {

  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    login: authActions.login
  },dispatch);
}

Login=connect(mapStateToProps,mapDispatchToProps)(Login)

注意connect函数参数必须第一个为mapStateToProps,第二个必须为mapDispatchToProps,可以不写mapDispatchToProps,但是如果需要mapDispatchToProps却不能不写mapStateToProps,否则会报错,个人第一次使用就犯了这个错误😓

啰哩啰嗦的说了这么多,码字不易,点赞再走哈。完整项目代码在github,欢迎点个star,不胜感激👏👏👏

0人推荐
随时随地看视频
慕课网APP