背景
在 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包了一层，可以更方便地生成storecreateAction：更方便地生成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 变化地过程中，增加一些功能。
常用地中间件比如：
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
react-redux 是官方提供的一个将 React跟 Redux 绑定的库，用来解决 React 跨组件通信复杂的问题。
react-redux 的原理是将 发布订阅模式 与 React 的 Context 结合。
几个主要的组件、方法：
