阅读 1262

Redux系列- redux、react-redux

redux 基础概念

适用场景

  1. 复杂的用户交互
  2. 分权限、分不同的角色下
  3. 多用户数据共享、协作
  4. 与服务器交互多,使用了websocket
  5. 页面需要的数据来自多个渠道

基础概念

store

整个应用中只能有一个数据管理的容器对象store

state

包含当前时刻所有的数据.通过store.getState() 得到

action

用于发出通知,更改state . 通过store.dispatch() 发出Action

reducer

用于处理发出的Action通知. 需要返回一个全新的state

reducer 必须是纯函数. 同样的输入,必定得到同样的输出.

设计理念

  1. 单一数据源:易管理、易调试.
  2. state只读, 保证了数据更改只能通过一种方式修改Action
  3. reducer 纯函数处理数据更新

常用API释义

creatStore
import {createStore,combineReducers} from 'redux'
// reducer
function userReducer(state=INIT_STATE.userInfo,action) {
    switch(action.type){
        case 'update':
            return {
                ...state,
                ...action.payload
            }
        case 'delete':
            return action.payload
        default:
            return state
    }
}
// 创建
const store = createStore(reducer)
const {subscribe,dispatch,getState} = store
复制代码
  1. createStore(reducer,[INIT_STATE],enhancer) 初始化创建 redux 容器 . 接受两个参数:reducer函数 、非必选INIT_STATE为reducer函数中参数state 默认值、非必选enhancer 复合高阶函数更改store接口.
  2. reducer(state,action) 处理Action ,参数:当前的state、要处理的action
combindReducers

合并多个reducer , 参数为一个对象

import {createStore,combineReducers} from 'redux'
// 多个模块 的reducer 
import * as UserReducer from './reducers/User'
import * as LogReducer from './reducers/Log'

// 合并reducer 为一个整体
const reducer = combineReducers({UserReducer,LogReducer})
// 创建
const store = createStore(reducer)
复制代码
数据容器对象 Store

  1. getState() 返回当前的 state

  2. dispacth(action) 分发 acion . 参数接受一个普通对象, 必须包含 type 字段表示类型 .

  3. subscribe(listener) 添加监听器 . state 发生变化时 , 调用 订阅函数listener

    返回值为一个取消订阅的函数 .

  4. replaceReducer(nextReducer) 替换当前用来计算state 的redcuer .

中间件
  1. applyMiddleWare(...middleWares) 通过中间键扩展redux .
  2. 每个中间件接受两个参数:dispatch 和 getState . 返回一个函数next(action)用于手动调用下一个调用链(用于更改默认发起的aciton,不改变时默认自动调用) . 最后一个调用链会接收到实际真是的dispatch .
bindActionCreators(actionCreators,dispatch)

格式化将类如 store.dispatch(updateUser()) 包装后 可在组件中直接调用 updateUser() 调用的方式.

  1. 第一个参数为 actionCreator 或者值为actionCreator 的对象 .
  2. 第二个参数为 store 提供的 分发函数.

componse(...fun)

从右到左来组合多个函数.按顺序执行

redux 基础使用

安装

npm install redux --save
复制代码

基础示例

分步使用:

  1. 创建 reducer ,
  2. 创建store.
  3. 订阅函数.
    1. 获取当前最新的 store
    2. 应用于视图UI.
    3. 数据变化更新视图.
  4. 事件分发.
import {createStore} from 'redux'

// 初始state
const INIT_STATE = {
    userInfo:{
        name:'admin',
        age:20,
    }
}
// reducer
function userReducer(state=INIT_STATE.userInfo,action) {
    switch(action.type){
        case 'update':
            return {
                ...state,
                ...action.payload
            }
        case 'delete':
            return action.payload
        default:
            return state
    }
}

// init
const store = createStore(userReducer)

// 订阅变化
// 变化时,打印数据
store.subscribe(()=>console.log(store.getState()))

// 分发action  
store.dispatch({type:'update',payload:{name:'test'}})
store.dispatch({type:'update',payload:{name:'test',age:32}})
store.dispatch({type:'delete'})
store.dispatch({type:'add'})

复制代码

管理多个 reducer

根据业务量、复杂度 , 仅有一个reducer处理函数,会变得特别庞大 、难以维护 .

通过拆分模块、划分功能.创建多个reducer 进行单独模块的数据状态管理 .

userInfo.js 用于用户数据的管理，数据更新；

// userInfo.js
const INIT_STATE = {
    name:'admin',
    age:23,
    address:'江苏省 南京市'
}

export function UserInfo(state=INIT_STATE,action) {
    const {type,data} = action
    switch(type){
        case 'updateName':
            return {
                ...state,
                name:data,
            }
        case 'updateAge':
            return {
                ...state,
                age:data,
            }
        default:
            return state
    }
}
复制代码

authInfo.js 用于当前登录用户的权限信息，权限更新；

// authInfo.js
const INIT_STATE = {
    role:'管理员',
    enable:false,
    operations:[],
}
export function AuthInfo(state=INIT_STATE,action) {
    
    const {type,data} = action
    switch(type){
        case 'updateRole':
            return {
                ...state,
                role:data,
            }
        case 'addOperate':
            // 拷贝 、 必要时深拷贝
            const obj = Object.assign(state)
            obj.operations.push(data)
            return obj
        default:
            return state
    }
}

复制代码

reducers.js redux初始化主入口文件，汇总模块中的reducer;

// reducers.js
import {combineReducers} from 'redux'
// 导入模块reducer
import {UserInfo as user} from './UserInfo'
import {AuthInfo as auth} from './AuthInfo'

const reducers = combineReducers({
    user,
    auth,
})

export default reducers
// index.js
import {createStore} from 'redux'

import reducer from './reducers'
// init
const store = createStore(reducer)

// 订阅变化
// 变化时,打印数据
store.subscribe(()=>console.log(store.getState()))
store.dispatch({type:'INIT_STATE'})
store.dispatch({type:'updateName',data:'test'})
store.dispatch({type:'updateRole',data:'测试成员'})
复制代码

在React 中使用

在不使用react-redux下, 访问store；

index.js 项目主入口文件；

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// store
import store from './store'

const render = ()=>ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
// store 变化重新执行渲染
render()
store.subscribe(render)

复制代码

reduxBox/index.js 模拟一个功能模块，获取全局的store 数据。

// reduxBox/index.js
import { lazy } from "react";
import { useRouteMatch, Route, Redirect } from "react-router-dom";
// 直接导入store 数据
import store from '../store/index'
// 组件加载
const UserInfo = lazy(()=>import("./userInfo"))

export default function App(props) {
  const { url } = useRouteMatch();
  const {user,auth} = store.getState();
  return (
    <>
      <div>
        <p>store 数据</p>
        <p>姓名:{user.name} - 年龄:{user.age} - 地址:{user.address}</p>
        <p>角色名称:{auth.role} - 是否有效:{auth.enable} - 操作权限:{auth.operations}</p>
      </div>
      <Route exact path={url}>
        <Redirect to={`${url}/userInfo`} />
      </Route>
      <Route path={`${url}/userInfo`} component={UserInfo} />
    </>
  );
}
复制代码

reduxBox/userInfo.js 用户信息模块，展示用户信息；可更新用户信息

// reduxBox/userInfo.js
import {Input} from 'antd'
import { useState } from 'react'
// 直接导入store 数据
import store from '../store/index'

export default function UserInfo(props) {
    const [name,setName] = useState('')
    // 获取数据
    const {user} = store.getState();

    return (<div style={{border:'1px solid #fff'}}>
        <p>当前状态</p>
        <p>姓名:{user.name} - 年龄:{user.age} - 地址:{user.address}</p>

        <Input onChange={e=>setName(e.target.value)} onPressEnter={e=>store.dispatch({type:'updateName',data:name})} />
    </div>)
}
复制代码

通过Input 输入确定后可以看到组件本身、父组件的数据视图都已更新.似乎这样没有任何的问题；

它能正常工作的原因主要在于，store数据变化，整个项目重新渲染，拿到最新的数据。

// 初始化渲染
render()
// store 订阅更新, 数据发生变化时调用
// ReactDomo.render() 重复调用时, 进行更新操作,对有必要更改的DOM映射最新为最新的元素.
store.subscribe(render)
复制代码

这种很明显的缺陷就是完全没有将store 数据融入到react中, 并不是react 一部分 , 在我们实际业务中,是什么引起的组件更新造成了很大的困扰.

  1. 不能使用shouldComponentUpdate 去控制 数据引起的组件更新.
  2. 不能使用 React.PureComponent 创建组件, 因为组件自身永远得不到要更新的理由.

解决的方式就是将store 数据流向需要的组件, 通过 props 或者context , 由于props局限（只能父传子）, 所以react-redux 使用 context 来实现redux 和react 的数据连通, 将数据映射到组件的props

可以通过context 来让store 数据变化引起视图变化更像react 的风格

// store
import store from './store'
// 创建 context
export const StoreContext = React.createContext({})

const render = ()=>ReactDOM.render(
  <React.StrictMode>
    <StoreContext.Provider value={store.getState()}>
      <App />
    </StoreContext.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
// store 变化重新执行渲染
render()
// store.subscribe(render)
复制代码

这是就不需要store.subscribe(render)去订阅更新了。

但是使用context还是不能让我们很好的控制组件的数据，虽然它有点像react风格了 , 所以有了react-redux

react-redux使用

安装

npm install --save react-redux
复制代码

引起组件更新的数据更改:state、props、context

API 释义

Provider

将redux store附加在整个应用层 , 类组件通过connect 获取数据和转发action, 函数组件通过 hooks useSelector\useDispatch

import {Provider} from 'react-redux'
// store
import store from './store'
// 创建 context
// export const StoreContext = React.createContext({})

const render = ()=>ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
render()
复制代码

在函数组件中使用hooks

useSelector

获取store 里的数据.

useDispatch

事件分发函数 .

代码示例说明：

// react-redux
import {useSelector,useDispatch} from 'react-redux'
export default function UserInfo(props) {
    const [name,setName] = useState('')
    // 获取数据
    const {user} = useSelector(state=>{
        const {user} = state
        return {
            user
        }
    })
    // 转发事件
    const dispatch = useDispatch()
    return (<div style={{border:'1px solid #fff'}}>
        <p>当前状态</p>
        <p>姓名:{user.name} - 年龄:{user.age} - 地址:{user.address}</p>

        <Input onChange={e=>setName(e.target.value)} onPressEnter={e=>dispatch({type:'updateName',data:name})} />
    </div>)
}
复制代码

在class 组件中使用

connect(mapStateToProps,mapDispatchToProps,mergeProps,options)

链接react组件与reduxstore

*  `mapStateToProps(gloablState,ownProps)` 链接`store` , 监听redux store变化,只要发生更改,就会更新此组件
*  `mapDispatchToProps(dispatch,ownProps)` 定义`action creator` , 通过调用,发起action
*  `mergeProps(stateProps,dispatchProps,ownProps)` 默认情况下返回`Object.assign({},wonProps,stateProps,dispatchProps)`
*  `options={pure:boolean,withRef:boolean}` `pure` 浅比较mergeProps的结果,避免不必要的更新;
复制代码

bindActionCreators(fn|object:{fn}) 转换为 action creator ,减少样板的重复使用；

// 示例中
dispatch({type:'addOperate',data:values})
// 转换
const updateOperates = bindActionCreators((values)=>{
  return {
        type:'addOperate',
        data:values,
    }
},dispatch)
// 然后调用
updateOperates()
复制代码

示例代码：

/**
 * 角色信息
 */
import React from 'react'
import {Select} from 'antd'
import {connect} from 'react-redux'
const {Option} = Select

class RoleInfo extends React.Component{
    render(){
        // 通过Props获取数据
        const {auth,dispatch} = this.props
        
        return(<div style={{border:'1px solid #fff'}}>
            <p>当前状态</p>
            <p>角色名称:{auth.role} - 是否有效:{auth.enable} - 操作权限:{auth.operations}</p>

            <Select style={{width:100}} mode="multiple" onChange={values=>dispatch({type:'addOperate',data:values})}>
                <Option value='1'>添加</Option>
                <Option value='2'>删除</Option>
                <Option value='3'>修改</Option>
            </Select>
        </div>)
    }
}

export default connect(
    state=>{
        const {auth} = state
        return {
            auth,
        }
    },
    dispatch=>{
        return {
            dispatch,
        }
    }
)(RoleInfo)
复制代码

性能优化

  1. 阻止组件的重复渲染 .
  2. 衍生数据的重复计算 .

参考资料

redux 官网

redux 中文网

react-redux 官网

阮一峰 的redux 相关教程

redux 官方视频教程

文章分类
前端
文章标签
Redux
相关推荐
  • 黄子毅
    3年前
    React.js 前端 jQuery
    精读《async/await 是把双刃剑》
    本周精读内容是 《逃离 async/await 地狱》。 终于，async/await 也被吐槽了。Aditya Agarwal 认为 async/await 语法让我们陷入了新的麻烦之中。 其实，笔者也早就觉得哪儿不对劲了，终于有个人把实话说了出来，async/await 可…
    • 4755
    • 15
  • 圆儿圈圈
    3年前
    Redux
    react-redux一点就透，我这么笨都懂了！
    1. 目录 2. redux简介 redux是react全家桶的一员，它试图为 React 应用提供「可预测化的状态管理」机制。 3. 安装 4. redux核心 State的变化，会导致View的变化。但是，用户接触不到 State，只能接触到View 所以，State的变化…
    • 3.7w
    • 15
  • 推啊前端团队
    3月前
    React.js Redux 前端
    一文读懂Redux、React-Redux源码
    前前言 朋友们好啊，我是来自推啊前端团队的 jarvis 同学，本次分享的内容是「解读Redux、React-Redux源码」。如果大家有不同的观点，欢迎在评论区吐槽和指正哦～😝😝😝 写在前面 作为
    • 341
    • 4
    一文读懂Redux、React-Redux源码
  • 杭州程序员张张
    6月前
    React.js 开源 前端
    使用Redux Toolkit简化Redux
    了解Redux Toolkit，这是用于高效Redux开发的经过验证的工具集。在本文中，你将看到为什么Redux Toolkit值得React社区更多的关注。 React和Redux被认为是大规模React应用中管理状态的最佳组合。然而，随着时间的推移，Redux的受欢迎程度下…
    • 1304
    • 1
    使用Redux Toolkit简化Redux
  • 风不识途
    1年前
    Redux
    一文总结redux、react-redux、redux-thunk、redux-sage | 掘金技术征文-双节特别篇
    尽管这样说，redux依然是和React或者Deku的库结合的更好，因为他们是通过state函数来描述界面的状态，Redux可以发射状态的更新，让他们作出相应。 我们可以直接通过同步的操作来dispatch action，state就会被立即更新。
    • 1912
    • 2
    一文总结redux、react-redux、redux-thunk、redux-sage | 掘金技术征文-双节特别篇
  • 进击的范大叔
    3年前
    React.js 服务器 Redux
    [译]怎样学习React—从初级到高级路线图
    这个指南是为初学React的朋友写的，在每个部分，我用心收集了最好的视频和文章，让我们学习起来更加容易。 Kent C. Dodds的Beginners guide to React React Router帮助你的单页面应用创建路由，它非常强大并且容易使用。 React的服务…
    • 7156
    • 11
  • 水痕001
    5月前
    React.js
    使用redux-toolkit简化react中redux的操作
    一、基本使用 1、官网地址 2、在项目中直接安装 3、查看@reduxjs/toolkit的依赖包 其中自动集成了thunk处理异步的包 4、在store文件夹下创建一个activity/slice.
    • 632
    • 2
  • junkaicool
    1年前
    React.js
    Redux + React-Redux + Redux-Thunk 在 React 实际项目开发中使用详解
    Redux 是搭配 React 项目开发中最常用的状态管理库，大家知道在我们 React项目开发时，组件的公用数据状态(如用户信息等)，可能多组件都会用到，如果组件间的关系比较明确(如父子关系)，传递还比较方便，但如果关系不明确或者毫无关系，这时候就非常麻烦了，但借助我们的Re…
    • 1150
    • 评论
  • 郭某某
    3年前
    React.js Redux
    如何优雅地在React项目中使用Redux
    前言或许你当前的项目还没有到应用Redux的程度，但提前了解一下也没有坏处，本文不会安利大家使用Redux概念首先我们会用到哪些框架和工具呢？ReactUI框架Redux状态管理工具，与React没有
    • 2327
    • 2
  • 阿里南京技术专刊
    3年前
    前端 Redux React.js
    还在用 Redux，要不要试试 GraphQL 和 Apollo？
    前段时间刷 Twitter 的时候看到大 V 纷纷提到 Apollo，预测它将在 2018 年崛起。正巧碰上有使用 GraphQL 的机会，在大概翻了下 Apollo 的文档之后，我下定决心在新的前端项目里尝试下抛开已经熟悉的 Redux，完全使用 Apollo 来写数据层。一…
    • 7646
    • 23
    还在用 Redux，要不要试试 GraphQL 和 Apollo？
  • 张不怂
    2年前
    React.js
    一篇文章总结redux、react-redux、redux-saga
    不愿清醒，宁愿一直沉迷放纵。 不知归路，宁愿一世无悔追逐。 --- 王小波 redux是的诞生是为了给 React 应用提供「可预测化的状态管理」机制。 提供subscribe，dispatch，getState这些方法。 按步骤手把手实战。 不就ok了吗？这就是 react-…
    • 3.1w
    • 41
  • 技术胖
    2年前
    React.js Redux
    技术胖Redux免费视频教程 2万字长文章 24集视频
    通过React基础教程的学习，我相信你一定对React有了很好的了解，也可以制作出一些简单的React项目（注意我这里说的是简单的项目）。为什么你只能做出一些简单的项目那?因为React就是一个简单的轻量级的视图层框架。 React当中的组件通信和状态管理是特别繁琐的，比如子组…
    • 1.7w
    • 52
    技术胖Redux免费视频教程 2万字长文章 24集视频
  • 图雀社区
    1年前
    React.js
    Redux 包教包会（一）：介绍 Redux 三大核心概念
    前端应用的状态管理日益复杂。随着大前端时代的到来，前端愈来愈注重处理逻辑，而不只是专注 UI 层面的改进，而以 React 为代表的前端框架的出现，大大简化了我们编写 UI 界面的复杂度。虽然 React 提供了 State 机制实现状态管理，也有诸如“状态提升”等开发约定，但…
    • 8418
    • 10
    Redux 包教包会（一）：介绍 Redux 三大核心概念
  • justjavac
    3年前
    React.js Redux 前端
    4 张动图解释为什么（什么时候）使用 Redux
    本文描述了什么时候开始使用 Redux。作者描述了在构建一个真实 React APP 时，从没有使用 Redux 到使用 Redux 的过程以及收获。 首先，并不是所有的 React 应用程序都需要使用 Redux。事实上，大多数非常简单的 React 应用程序根本不能从 Re…
    • 6890
    • 27
    4 张动图解释为什么（什么时候）使用 Redux
  • 村上春树
    3年前
    React.js 前端 Redux
    redux真的不复杂——源码解读
    在我实习入职培训的时候，给我培训的老哥就跟我说过，redux的核心源码很简洁，建议我有空去看一下，提升对redux系列的理解。 入职一个多月了，已经参与了公司的不少项目，redux也使用了一段时间，对于redux的理解却一直没有深入，还停留在“知道怎么用，但是不知道其核心原理”…
    • 9562
    • 20
  • 建刚
    3年前
    React.js Redux MobX
    你需要Mobx还是Redux？
    在过去一年，越来越多的项目继续或者开始使用React和Redux开发，这是目前前端业内很普遍的一种前端项目解决方案，但是随着开发项目越来越多，越来越多样化时，个人又有了不同的感受和想法。是不是因为已经有了一个比较普遍的，熟悉的项目技术栈，我们就一直完全沿用呢，有没有比他更适合的…
    • 2.5w
    • 36
  • 有赞前端
    3年前
    MobX React.js Redux
    我为什么从Redux迁移到了Mobx
    Redux是一个数据管理层，被广泛用于管理复杂应用的数据。但是实际使用中，Redux的表现差强人意，可以说是不好用。而同时，社区也出现了一些数据管理的方案，Mobx就是其中之一。 这是Redux给自己的定位，但是这其中存在很多问题。 首先，Redux做了什么？看Redux的…
    • 1.1w
    • 43
    我为什么从Redux迁移到了Mobx
  • HYCS
    1年前
    Redux
    react之redux基本用法
    一. state state是redux保存数据的地方，并且state只能有一个。有的地方讲store是保存数据的地方，但是我更倾向于将store理解成一个装着获取state(getState)、操作state(dispatch)和监听state(subscribe)的方法的对…
    • 1228
    • 评论
  • WATER_7710
    3年前
    React.js JavaScript Redux
    React构建个人博客
    在学习react的过程中，深深的被react的函数式编程的模式所吸引，一切皆组件，所有的东西都是JavaScript。React框架其实功能很单一，主要负责渲染的功能，但是社区很活跃，衍生出了很多优秀的库和工具。个人觉得，想要做好一个项目，往往需要其他库和工具的配合，例如red…
    • 5623
    • 27
  • nanjixiong
    3年前
    React.js Express koa
    redux, koa, express 中间件实现对比解析
    如果你有 express ,koa, redux 的使用经验，就会发现他们都有 中间件（middlewares）的概念，中间件 是一种拦截器的思想，用于在某个特定的输入输出之间添加一些额外处理，同时不影响原有操作。 最开始接触 中间件是在服务端使用 express 和 koa …
    • 3812
    • 4
    • 关于作者
    web 前端 @ suning
    获得点赞42
    文章被阅读5,144
    下载手机APP
    一个帮助开发者成长的社区
    相关文章
    Vue 系列 - v-model自定义组件结合el-form做表单校验
    2
    0
    常用浏览器API整理
    3
    0
    vue 实现 el-select 下拉选项的懒加载
    3
    0
    Redux系列 - redux/toolkit
    3
    2
    初识SVG - 绘制基础图形
    9
    1