[三元学React]Redux工作流及工程化编码指南

栏目: 服务器 · 发布时间: 5年前

内容简介:Redux 是 JavaScript 状态容器, 提供可预测化的状态管理。它专门为React.js这门框架设计,但并不是只能用于react,可以用于任何界面库。那为什么React.js需要这个状态容器管理呢?首先明确React是什么,根据官方的定义,React仅仅是一个视图层的框架,解决的是数据与模板的渲染问题,但是并没有提供数据的状态管理方案,这在大型项目中是一个非常大的痛点。比如说:

Redux 是 JavaScript 状态容器, 提供可预测化的状态管理。它专门为React.js这门框架设计,但并不是只能用于react,可以用于任何界面库。

那为什么React.js需要这个状态容器管理呢?

首先明确React是什么,根据官方的定义,React仅仅是一个视图层的框架,解决的是数据与模板的渲染问题,但是并没有提供数据的状态管理方案,这在大型项目中是一个非常大的痛点。比如说:

[三元学React]Redux工作流及工程化编码指南

凡是复杂一些的应用都会有这样组件树的结构,那么非父子组件如何传递数据呢?比如标记上蓝色的组件与右下角的组件进行数据传递,如果仅仅用react组件的父子传值方法,那么需要先传递给父组件,然后由父组件传给上一级的父组件,然后再向下面的子组件传递......明明只是两个组件的交互,居然要 用如此复杂的操作,是不是让人非常沮丧呢?如果项目稍微复杂,即使可以开发,但也变得不可维护。因此Redux应运而生。让Redux统一管理数据,任何组件对数据的操作,都交给redux管理,这样就大大提高了开发和维护的效率。

二、Redux设计原则

1、单一数据源

使用redux的程序,所有的state都存储在一个单一的数据源store内部,类似一个巨大的对象树。

2、state只读

state是只读的,外部能改变state的唯一方式是通过触发action来修改

3、使用纯函数进行修改

为了描述action如何改变state,需要编写一些具体的逻辑,这些逻辑写在reducer中。而reducer就是一些纯函数。

纯函数:有固定的参数输入且有固定的return输出,不会存在异步的操作,同时在这个过程中不会修改参数的值。

三、Redux工作流

[三元学React]Redux工作流及工程化编码指南

也许第一次看不是很明白,没有关系,可以用图书馆借书的例子做一个类比:

[三元学React]Redux工作流及工程化编码指南

一图胜千言,其实redux的工作流程也是非常简单的。

四、使用redux

// src/store/index.js
import { createStore } from 'redux';
import reducer from './reducer';
//通过createStore创建一个store,把reducer作为参数传入
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()//chrome中激活redux devtools插件
);

export default store;
复制代码
// src/store/reduce.js
const defaultState = {
  inputValue: '',
  list: []
}
export default (state = defaultState, action) => {
  if(action.type === 'add_item') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(newState.inputValue)
    newState.inputValue = ''
    return newState
  }
  return state;
}
复制代码
// App.js
import React, { Component } from 'react'
import store from './store/index.js'

class App extends Component {
  constructor(props) {
    super(props);
    //从redux拿到state
    this.state = store.getState()
    //store需要通过一个方法给组件传递newState,并将这个方法传入subscribe函数的参数里面
    this.handleStoreChange = this.handleStoreChange.bind(this)
    store.subscribe(this.handleStoreChange)
  }
  render() { 
    return ( 
     //渲染部分
    );
  }
  handleStoreChange() {
    //更新组件状态
    this.setState(store.getState())
  }
}

export default App;
复制代码
//在响应点击事件的函数中
  handleItemClick(e) {
    const action = {
        type: 'add_item',
        value: e.target.value
    }
    //由store进行action的分发
    store.dispatch(action)
  }
复制代码

五、更科学地编写Action

仔细想想,其实上面编写响应函数里面的action部分其实是有问题,因为当我们输入字符串的时候,一不小心输错了一个字母,无法进行状态的变化,但这个时候reducer识别不了对应的type,也不会报错。这个时候可能调试会浪费非常多的时间。

这时候就需要编写更加规范的action来防止这种事故。

// src/store/actionTypes.js
export const ADD_ITEM = 'add_item'

// src/store/actionCreators.js
import { ADD_ITEM } from "./actionTypes";
export const getAddItemAction = (e) => ({
  type: ADD_ITEM
  value: e.target.value
})
复制代码

然后,在App.js中,

//首先引入Action
import { getAddItemAction } from './store/actionCreators'
//修改响应函数
handleItemClick(e) {
    const action = getAddItemAction(e)
    store.dispatch(action)
}
复制代码

这样的编写方式虽然引入了actionTypes和actionCreators,操作更加 麻烦,但是更能应对大型复杂项目的action管理,实际上提高了开发维护的效率。

这是对redux初步的小结,希望对大家有所帮助。


以上所述就是小编给大家介绍的《[三元学React]Redux工作流及工程化编码指南》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Programming Python

Programming Python

Mark Lutz / O'Reilly Media / 2006-8-30 / USD 59.99

Already the industry standard for Python users, "Programming Python" from O'Reilly just got even better. This third edition has been updated to reflect current best practices and the abundance of chan......一起来看看 《Programming Python》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具