📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • redux入门
  • 什么是Redux
  • Redux基础概念
  • 三个基础部分
  • 单向数据流
  • 不可变性
  • 三原则
  • Redux原生API
  • Demo
  • Redux实际应用
  • configureStore
  • createAction和createReducer
  • CreateSlice
  • react-redux
  • Provider
  • 获取State和更新state
  • Demo
在GitHub上编辑
  1. 前端技术
  2. React

Redux入门

R

redux入门

什么是Redux

redux是一个全局状态管理库,通常是集成到react中使用。Redux 提供的模式和工具使你更容易理解应用程序中的状态何时、何地、为什么、state 如何被更新,以及当这些更改发生时你的应用程序逻辑将如何表现。

Redux基础概念

三个基础部分

一个redux应用拥有三个部分:

  • view:基于当前状态的视图声明性描述

  • state:驱动应用的真实数据

  • actions:应用程序中发生的事件,用于触发状态更新

单向数据流

数据的流动是单向的,用户与视图(View)交互后会通过action来通知数据state更新,state更新后又会重新渲染视图(View)。

不可变性

JavaScript中对象和数组都是“可变”的,内存中保存的是对象的引用。

const obj = {}
console.log(obj)
obj.a = 1;
/* console
{
  a: 1
}
*/

我们先获取对象的值,然后再改变对象,但是最后看到的仍然是更新后的对象。

Redux 期望所有状态更新都是使用不可变的方式。这通常可以利用展开运算符实现。

三原则

  • 单一事实来源:整个应用程序的状态存储在单个存储中的对象树中。

  • 状态是只读的:更改状态的唯一方法是发出一个操作,一个描述所发生情况的对象。

  • 使用纯函数进行更改:若要指定状态树如何通过操作转换,请编写纯化简器。

Redux原生API

redux通过createStore创建一个redux应用,它必须接收一个reducer函数作为第一个参数,第二个参数是初始state,它是可选的。

const state = {
  play: false,
  player: '周杰伦',
  musicName: '青花瓷',
  time: new Date(),
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'Change_Play':
      return { ...state, play: !state.play };
    case 'ChangeMusicInfo': {
      return { ...state, ...action };
    }
    default: {
      return { ...state };
    }
  }
};

export const store = createStore(reducer, state);

如果reducer比较复杂,可以将其拆分成多个reduer,然后在通过combineReducers进行合并。注意不应该创建多个store。

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// 这将返回如下的 state 对象
{
  potato: {
    // ... potatoes, 和一些其他由 potatoReducer 管理的 state 对象 ...
  },
  tomato: {
    // ... tomatoes, 和一些其他由 tomatoReducer 管理的 state 对象,比如说 sauce 属性 ...
  }
}

createStore得到的store上挂载了四个方法:

事实上你通常不需要直接操作这些API,因为实际开发时通常使用用官方工具库redux-toolkit来简化操作。

Demo

这里有一个使用redux原生API与react结合的Demo。

Redux实际应用

在实际开发中使用redux时通常会结合redux-toolkit和react-redux一起使用。

configureStore

在原生Redux中我们用createStore来创建一个redux状态树,但是现在有了redux-toolkit后,我们可以借助configureStore这个函数来创建redux状态树。和createStore相似,这里需要传递一个reducer,只不过现在是通过对象参数的方式来传递。

export const store = configureStore({
  reducer: rootReducer
});

createAction和createReducer

action是触发state更新的唯一方式,它一个至少包含type字段的对象。我们之前用action的时候每次都要写一遍action对象,但是其实可以通过action creator函数来简化操作。

export function playStateAction(payload:any){
	return {
		type: "CHANGE_PLAY_STATE",
		payload
	}
}

这样我们就不用每次都写一遍action对象了,只需要调用playStateAction函数,并传递所需的参数就能得到一个action。

redux-toolkit提供了createAction函数来实现这个操作,只需要传递一个字符串作为type,就会返回一个action creator函数。

const changePlay = createAction("CHANGE_PLAY_STATE");
console.log(changePlay({ a: 1 }));
/*
{
type: "CHANGE_PLAY_STATE"
payload: {a: 1}
}
*/

redux-toolkit同样提供了简化编写reducer的API,即createReducer。createReducer有两种使用方式,一种是链式函数调用,一种是查找表对象。

链式函数调用

const rootReducer = createReducer(initState /*初始状态*/, (builder) => {
  builder
    .addCase(changePlay, (state, action) => {
      return {...state, play: !state.play};
    })
    .addDefaultCase((state) => state);
});

查找表对象

const rootReducer = createReducer(initState, {
	// 利用es6计算属性获取type
  [changePlay]: (state) => ({ ...state, play: !state.play })
});

CreateSlice

基于前面的三个API已经可以实现redux状态库了,但是还不够好,因为此时所有的状态都被放在了一个对象里,如果应用较为复杂,那么状态对象(store)、action就很容易变得杂乱无章。更好地方法是将状态对象分隔成多个部分,相同逻辑的状态放在一起,并且将相关联的action也整合进去,那么最后得到的这一个个的部分我们称为Slice,而用于创建Slice的函数就是createSlice。

// 原来的写法
export const changePlay = createAction("CHANGE_PLAY_STATE");
const initState = {
  play: false
};
const rootReducer = createReducer(initState, {
  [changePlay]: (state) => ({ ...state, play: !state.play })
});
export const store = configureStore({
  reducer: { rootReducer }
});

// Slice的写法
const initState = {
  play: false
};
const playSlice = createSlice({
  name: "playStatus",
	initialState: initState,
  reducers: {
    changePlay: (state) => ({ ...state, play: !state.play })
  }
});
export const store = configureStore({
  reducer: playSlice.reducer
});
export const { changePlay } = playSlice.actions;

在创建Slice的过程中redux-toolkit会自动生成action creator ,相比较原来的写法省略了编写action creator这一步,并且相同逻辑的action和reducer都被整合在一个Slice中,代码结构更加清晰。

如果有多个Slice,可以将它们放到一个对象中传给configureStore。

export const store = configureStore({
  reducer: {
    [playSlice.name]: playSlice.reducer,
    [musicSlice.name]: musicSlice.reducer
  }
});

react-redux

如果要在react中使用redux,最好的方法是使用react-redux。

假设我们已经通过redux-toolkit创建了一个store。如下所示:

const initState = {
  play: false,
  musicName: "青花瓷"
};
const playSlice = createSlice({
  name: "playStatus",
	initialState: initState,
  reducers: {
    changePlay: (state) => ({ ...state, play: !state.play })
  }
});
export const store = configureStore({
  reducer: playSlice.reducer
});
export const { changePlay } = playSlice.actions;

Provider

首先我们需要为react提供redux store,这可以通过Provider组件实现,Provider需要传递store作为prop。

import { Provider } from "react-redux";
import { store } from "./store/index";

import Child from "./Child";

export default function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <Child />
      </Provider>
    </div>
  );
}

之后被Provider直接或间接包裹的子孙组件都可以访问到store。

获取State和更新state

通过react-redux提供的useSelector API来获取state。useSelector 需要传递一个selector函数,通过这个函数来提取数据。

同时还提供useDispatch API,通过它来获取dispatch函数,向dispatch函数传递action对象来更新state。

import { useSelector, useStore, useDispatch } from "react-redux";
import { changePlay } from "./store/index";

export default function Child() {
  const dispatch = useDispatch();
  const playStatus = useSelector((state) => state);

  console.log(playStatus);

  function onPlay() {
    dispatch(changePlay());
  }

  return (
    <div>
      <p>播放状态:{playStatus.play ? "播放中" : "暂停中"}</p>
      <div>
        <button onClick={onPlay}>切换播放状态</button>
      </div>
    </div>
  );
}

Demo

上一页React组件通讯下一页Flux

最后更新于1年前

:返回应用当前的 state 树。 它与 store 的最后一个 reducer 返回值相同。

:触发state更新

:订阅一个监听器,当state变化时执行回调

:替换 store 当前用来计算 state 的 reducer。

getState()
dispatch(action)
subscribe(listener)
replaceReducer(nextReducer)
https://codesandbox.io/s/reduxyuan-sheng-g8l1px?from-embed=&file=/src/App.js
https://codesandbox.io/s/reverent-joliot-bpqwdh?file=/src/Child.js:32-43