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 ,然后 DispatcherStore 更新状态 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 (
    
{ e.preventDefault() if (!input.value.trim()) { return } dispatch(addTodo(input.value)) input.value = '' }}> input = node} />
) } export default connect()(AddTodo)

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

第五步: 编写组件 TodoList

再来个稍微复杂的

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

const Todo = ({onClick, completed, text}) => (
  
  • {text}
  • ) const TodoList = ({todos, toggleTodo}) => (
      {todos.map(todo => ( toggleTodo(todo.id)} /> ))}
    ) 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 = () => (
      
    ) 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 (
          
            
          
        )
      }
    }
    
    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

    你可能感兴趣的:(redux,react.js,flux)