React 快速上手 - 08 redux 状态管理 react-redux

目录

• 01 前言
• 02 开发环境搭建
• 03 脚手架创建项目 一切都是组件
• 04 基础特性 JSX、Props、State、Lifecycle、Event、Style
• 05 组件渲染控制
• 06 容器组件、展示组件
• 07 前端路由 react-router
• 08 状态管理 react-redux
• 09 数据请求 fetch
• 10 属性类型检查 prop-types

React 快速上手 - 08 redux 状态管理 react-redux

今天我会快速的过一下 redux 知识，然后讨论下 适用性，最后为了让大家能快速学习，简化了官方的经典 Demo todo ，跟着我做一遍就行。

目标

• 了结什么是 redux
• 什么情况下适用
• 创建一个 redux 应用
• 安装调试插件

闲话

redux 是一个很深的话题，先聊聊标准学习路线，打开 https://redux.js.org/introduction

笔者为了写这文章，可是安静的读了一遍

首先 Introduction 7 篇

好像懂了什么，不知道呢

然后 Base 6 篇

其实 Example: Todo List 这才是最有帮助的

又听了视频 Getting Started with Redux 视频

好啰嗦啊

不过这也是学习的正确姿势，总要看一遍官方文档，无奈官网设计的更像一个学术站点，而不是类库工具一类的指导说明

好了好了~吐槽完毕，开始正文！

redux 是什么, 可以不用么

这张图是 Flux 官网的，画的很好。

Redux 是一种 数据的管理 方式，界面上发起各种操作 Action ，然后 Dispatcher 到 Store 更新状态 State，推送新状态到视图 View

好了，概念一句话说完了，来看看什么情况下用 Redux

这个界面，如果用 React 来实现，在底部的 容器组件 要处理的业务有: 用户登录、弹幕、主播信息、视频进度、道具、打赏、IM聊天、等等还有很多 而且随着产品迭代，功能只会多

按我们之前的组件拆分，结构是合理，但是这个数据管理麻烦了，各种业务数据压入子组件，各种业务事件返回到主容器组件，可能的代码结构如下

// 状态
this.state = {
  data1:...,
  data2:...,
  data3:...,
  data...n:...
}

// 事件
function handelEvent1 = {...}
function handelEvent2 = {...}
function handelEvent3 = {...}
function handelEvent...n = {...}

// JSX
<主视图组件>
  <用户信息 data1={this.state.data1} handleEven1={...} handleEven2={...} handleEven...n={...} />
  <主播信息>
    <基础资料 data...n={...} handleEven...n={...} />
    <头像 data...n={...} handleEven...n={... />
    <关注 data...n={...} handleEven...n={... />
    <标签 data...n={...} handleEven...n={... />
    <热度 data...n={...} handleEven...n={... />
    ...
  </主播信息>
  <播放器 ...>
    <... />
    ...
  <播放器>
    ...
  <...播放器/>
  ...
</主视图组件>

会发现组件套组件，父父子子的，完全没法维护了，梳理这些关系就很费时间，而且容易错误

Redux 就是来解决这个问题的，每个组件只要执行自己的 Action ，不用返回到父容器

• 比如 Redux 在弹幕业务中就两步：

  1. 弹幕发出组件 执行发出弹幕动作 Action 内容 { type: 'BARRAGE_SEND', text: '弹幕消息' }
  2. 弹幕滚动组件 新弹幕数据被更新到弹幕滚动组件

但是也不好滥用，我看到有些简单的 表单操作，竟然也套了 Redux ，完全没必要，自己把握吧

动手创建一个 redux 应用

来个经典例子 todo , 原版 Todo , 我这里是精简版，那么我们开始

• 动图效果

• 组件结构

第一步: 编写 Action

界面上产生的操作

let nextTodoId = 0

export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

export const toggleTodo = id => ({
  type: 'TOGGLE_TODO',
  id
})

• 事件的格式

  • type 字段必须有，表示做什么操作
  • type 值全局唯一
  • type 大写定义
  • 其它字段自由定义

第二步: 编写 Reducers

事件对应的响应处理，处理完后返回新 state

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    case 'TOGGLE_TODO':
      return state.map(
        todo =>
          todo.id === action.id ? {...todo, completed: !todo.completed} : todo
      )
    default:
      return state
  }
}

export default todos

第三步: 合并 Reducers

使用 combineReducers 合并所有的处理过程

import { combineReducers } from 'redux'
import todos from './todos'

export default combineReducers({
  todos
})

假设你有其它业务, 如: 用户 user , 购物车 cart

import { combineReducers } from 'redux'
import todos from './todos'
import user from './user'
import cart from './cart'

export default combineReducers({
  todos,
  user,
  cart
})

第四步: 编写组件 AddTodo

• 使用 connect 连接组件
• 使用 dispatch 方法派发事件

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../redux/actions'

const AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => input = node} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}

export default connect()(AddTodo)

dispatch(addTodo(input.value)) 就发动了 Redux 到 Reducers , 这时 state 更新了

第五步: 编写组件 TodoList

再来个稍微复杂的

import React from 'react'
import {connect} from 'react-redux'
import {toggleTodo} from '../redux/actions'

const Todo = ({onClick, completed, text}) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

const TodoList = ({todos, toggleTodo}) => (
  <ul>
    {todos.map(todo => (
      <Todo key={todo.id} {...todo} onClick={() => toggleTodo(todo.id)} />
    ))}
  </ul>
)

const mapStateToProps = state => ({
  todos: state.todos
})

const mapDispatchToProps = dispatch => ({
  toggleTodo: id => dispatch(toggleTodo(id))
})

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

还是 connect 方法 , 这里重点讲下

先看看官方定义 connect()

• 定义

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

• 参数

名称	说明
mapStateToProps	store 绑定 state , 做更新的需要传入
mapDispatchToProps	绑定派发事件 event , 不传的话默认 dispatch 对象, 就像上面的 AddTodo 组件
mergeProps	[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 合并属性自定义，自己不传的话默认 ·Object.assign ，我也是放空默认的
options	一些选项，我没怎么在意，知道有就行

[mapStateToProps], [mapDispatchToProps] 这两个用到的多，大家自己练习下

第六步: 容器组件

import React from 'react'
import AddTodo from './AddTodo'
import TodoList from './TodoList'

const App = () => (
  <div>
    <AddTodo />
    <TodoList />
  </div>
)

export default App

这里简单，并列排放

最后: 适配 App

import React, {Component} from 'react'
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import TodoApp from './todos/components/App'
import todoReducer from './todos/redux/reducers'

const store = createStore(todoReducer)

class BaseRedux extends Component {
  render() {
    return (
      <Provider store={store}>
        <TodoApp />
      </Provider>
    )
  }
}

export default BaseRedux

• 标准代码格式

  1. createStore(reducers) 创建 store
  2. Provider 适配器压入 store 对象, 子节点都受 Redux 控制

调试工具 Redux DevTools extension

动图效果

1. 安装 chrome 插件

打开 redux-devtools

2. 配置代码

const store = createStore(
  todoReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

createStore 时加入 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

3. 开启插件

打开 chrome 调试工具，点击面板 Redux

codepen

https://codepen.io/ducafecat/...

代码

• reactjs-example / 6-redux.js

参考

• redux 官网
• flux 官网
• Getting Started with Redux 视频
• Building React Applications with Idiomatic Redux 视频
• Redux 中文文档
• Example: Todo List
• Redux DevTools extension
• zalmoxisus/redux-devtools-extension