背景
在 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
变化地过程中,增加一些功能。
常用地中间件比如:
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
结合。
几个主要的组件、方法: