How does redux work

背景

在 react 项目中用到了 redux，了解了一下它的原理

基本使用

demo: https://stackblitz.com/edit/how-does-redux-work-01?file=index.js

redux 是一种管理数据流的方式，可以单独使用。也可以通过 react-redux 在 react 中使用。

@reduxjs/toolkit

官网：https://redux-toolkit.js.org

demo: https://stackblitz.com/edit/how-does-redux-work-02?file=index.js

@reduxjs/toolkit 是 redux 官方提供的工具包，为了高效地使用 redux 开发。

@reduxjs/toolkit 中的几个主要方法：

• configureStore：对 redux 包里的 createStore 包了一层，可以更方便地生成 store

• createAction：更方便地生成 action

import { createAction } from '@reduxjs/toolkit'
const increment = createAction('counter/increment')
let action = increment()
// { type: 'counter/increment' }
action = increment(3)
// returns { type: 'counter/increment', payload: 3 }
console.log(increment.toString()) // or increment.type
// 'counter/increment'

• createReducer：更方便地生成 reducer，避免多个 switch case 地写法

• createSlice: 更方便地生成 reducer 分片，内部调用 createAction 和 createReducer，内置 immer 来处理数据

reselect

reselect 用来更方便地从 store 中取值。

redux中间件

在触发 action 到 reducer 变化地过程中，增加一些功能。

常用地中间件比如：

• redux-thunk

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    // 如果action是function，可能是要做异步操作，把dispatch和getState透传到function中
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

• redux-logger：记录触发 action 前后 store 的变化

• redux-saga：更强大的 redux 中间件，通过使用一些 effect (比如call、put、select)，更简单高效地管理 redux

redux-sage

demo：https://stackblitz.com/edit/how-does-redux-work-03?file=index.js

react-redux

官网：https://react-redux.js.org

react-redux 是官方提供的一个将 React跟 Redux 绑定的库，用来解决 React 跨组件通信复杂的问题。

react-redux 的原理是将 发布订阅模式 与 React 的 Context 结合。

几个主要的组件、方法：

• Provider
• connect