Redux

redux 原理

F:\Code\Front-end\Project\mini-redux

  • createStore
  • combineReducers
  • applyMiddleware
  • compose

    redux时间旅行

redux-thunk

作用：让我们可以dispatch一个函数，而不只是普通的object
thunk：函数式编程的专有名词，主要用于延迟计算，

  1. function wapper(arg) {
  2.     return function thunk() {
  4.   }
  5. }
  1. function createThunkMiddleware(extraArgument) {
  2.   return ({ dispatch, getState }) => next => action => {
  3.     if (typeof action === 'function') {
  4.       return action(dispatch, getState, extraArgument); 
  5.     }
  6.     return next(action);
  7.   }
  8. }

判断每个经过它的action，如果是function类型，就调用这个function，而不是任由它到达reducer。因为reducer是个纯函数，Redux规定到达reducer的action必须是一个plain object
redux-thunk就是一个语法糖，可以不使用它。
一个异步的操作，我们不使用redux-thunk，那么我们就需要把dispatch传进去（或者你有一个导出的store，你可以通过store.dispatch），如果我们使用redux-thunk，那么我们可以在外面dispatch这个异步操作的函数，里面返回一个函数，这个thunk函数(延迟函数)的参数是dispatch，然后使用dispatch。
好处是组件不用知道动作创建者是同步还是异步的，以及它们是否调用了其他的创建者。

RTK

API

  1. configureStore(options)：包裹createStore来提供一个简化的配置选项和更好的默认值。默认包括了redux-thunk、Redux DevTools Extension，和一些开发检查，以发现一些常见错误。

    1. const store = configureStore({
    2. reducer: {
    3.  /* your reducers 可以自动 combineReducer */
    4. },
    5. middleware: (getDefaultMiddleware()) => {
    6.  return getDefaultMiddleware().concat(/* your middleware */)
    7. },
    8.  preloadState: /* initialState of store */ 
    9. ...otherProps
    10. })

  2. createReducer：让你不用写switch代码了，自动使用了immer ——非用户调用

  3. createAction: 生成动作 —— 非用户调用

  4. **createSlice**：接受一个reducer函数对象，slice名字，和初始值，自动生成绑定了action creator 和 action type的 slice reducer，里面可以直接修改状态，而不用进行拷贝。因为内部使用了immer这个库。

    1. createSlice({
    2. name: '', // 必填
    3. initialState: '' // 必填,
    4. reducers: {} // 必填
    5.  extraReducers: {} // 可选
    6. })

  5. createAsyncThunk：接受一个 stirng 类型的 action和一个函数，返回一个promise，生成一个thunk去dispatch promise里面的pending/fullfilled/rejected。使用 rtk query 就基本不用这个了

  6. createEntityAdapter：生成一些列可复用的reducer和selector来管理归一化store中的数据，未使用到
  7. createSelector：未使用到

RTK query：类似于 React-qeury

  • createApi：
    • reducerPath：相当于key，如果你调用了多个createApi ，那就需要指定这个。默认是api
    • baseQuery：fetchBaseQuery({ baseUrl: ‘url前缀’ })

transformResponse：允许我们通过 query 或者 mutation进行发请求的时候，在命中缓存之前操作数据
onQueryStarted： // TODO

RTK query 在条件表达式中使用：

场景：有时候我们不想组件一渲染就请求数据，我们想在满足某些条件的时候，再请求，但是hook又不能在条件表达式中使用
使用方法：传递一个 skip 参数，eg：

  1. const { data, error, status } = useGetPokemonByNameQuery(name, {
  2.     skip,
  3. });

redux | RTK 存储token或者身份验证信息

我们知道，单纯用状态管理去存储身份验证信息，当页面刷新的时候就没了，所以需要一些更好的办法，初始状态读取 storage 存的值，这样下次初始就能拿到之前缓存的值了。然后在我们在store.substribe 里面拿到 store.getState 相应的状态存到 storage 缓存中。