Java教程

《彻底掌握redux》之开发一个任务管理平台(上)

本文主要是介绍《彻底掌握redux》之开发一个任务管理平台(上),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言

redux是上手react开发的必经之路,也是目前react项目中使用的最流行状态管理库。虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信和项目开发,但是对于一个大型项目而言,往往考虑的更多的是代码结构和组件之间的通信,我们需要一种很优雅且有利于扩展的方式去开发我们的复杂系统,所以这种情况下使用redux是最佳的选择。

由于之前有朋友希望快速上手一下redux开发,所以笔者特意开发了一个小项目,希望通过这个项目可以让大家快速掌握redux及其生态的使用方式,以便今后在技术选型上有更多的空间。

你将收获

  • redux的工作机制和基本概念
  • redux的使用模式
  • redux相关生态的使用(react-redux, keymirror, reduce-reducers)
  • 异步action解决方案redux-thunk
  • 项目技术选型和架构
  • 基于react实现一个可用的任务管理平台
  • 如何实现自己的js工具库

正文

1. redux的工作机制和基本概念

以上是笔者画的一个草图,描述了redux的数据流转机制。首先是用户触发action(在代码层面只有dispatch才能触发action),这时store会自动调用reducer函数并传入上一个状态的state和action,reducer函数会返回一个新的state,这个时候store会监听state的变化并调用监听函数,此时我们的react组件就会重新渲染并生成新的view。

redux的设计思想核心就是把web应用当作一个状态机,视图和状态一一对应,所有的状态都保存在一个对象里

由上图可以看出redux几个核心api就是

  • store 保存数据的容器
  • state 某个时刻store的快照
  • action 标识当前要执行的动作。 action是改变 State 的唯一方式
  • dispatch 执行action的唯一方式
  • reducer 计算并生成一个新state的方式

我们只要理清它们的关系和工作机制,redux也就能轻松使用了。

2. redux的使用模式

redux的基本工作流程熟悉之后,我们来看看如何将redux运用在项目中。以下是使用redux的基本步骤,大家可以参考一下:

  1. 定义初始化的state
  2. 定义action
  3. 编写reducer函数
  4. 使用dispatch触发action

基本代码如下:

// 1. 定义初始化的state
const initSate = {
    num: 0
}
// 2. 定义action
function add() {
    return {
        type: 'INCREMENT'
    }
}
function dec() {
    return {
        type: 'DECREMENT'
    }
}
// 3. 编写reducer函数
const reducer = (state = initState, action) => {
  switch (action.type) {
    case 'INCREMENT': return {...state, {num: state.num + 1}}
    case 'DECREMENT': return {...state, {num: state.num - 1}}
    default: return state;
  }
}
// 创建store
const store = createStore(reducer)
// 4. 使用dispatch触发action
const renderView = () => {
  ReactDOM.render(
    <YourComponent
      value={store.getState()}
      add={() => store.dispatch(add())}
      dec={() => store.dispatch(dec())}
    />,
    document.getElementById('root')
  );
};

renderView();
store.subscribe(renderView);
复制代码

通过以上的步骤我们就可以基本开始redux开发了,redux还提供了中间件机制,暴露了applyMiddleware, compose等API,这里我们先简单提一下,后续会涉及到相关的使用。

实际项目中我们往往不会直接使用redux,我们会搭配使用react-redux等库,通过将react和redux以更优雅的方式结合到一起来开发更加可维护的项目。

3. redux相关生态的使用(react-redux, keymirror, reduce-reducers)

3.1 react-redux

react-redux的核心思想是将所有组件分成渲染组件(纯组件)和容器组件(负责处理业务逻辑和状态),渲染组件只负责展示,没有状态,容器组件负责处理各种状态和逻辑。所以用户只需要提供渲染组件来呈现视图,容器组件会由react-redux自动生成。所以整个过程看上去像这样:

我们来看看如何使用react-redux。首先它提供了connect方法用于从 UI 组件生成容器组件,并将UI组件和容器组件连接在一起,具体用法如下:

import { connect } from 'react-redux'

const HomeContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Home)
复制代码

home是我们的UI组件,通过mapStateToProps, mapDispatchToProps这两个函数参数,我们可以将redux的store和action映射到UI组件的props上,这样我们就可以实现正常的数据单向流转。

mapStateToProps的作用就是建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系,我们一般可以这么定义:

const mapStateToProps = (state) => {
    let { capacity } = state
    return { capacity }
}
复制代码

返回的capacity就是我们要传给某个UI组件的props里的某个属性。

mapDispatchToProps用来建立 UI 组件的参数到store.dispat

这篇关于《彻底掌握redux》之开发一个任务管理平台(上)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!