起因

https://redux.js.org/introduction/getting-started 2021-03-09

在本文写作之时，Redux 文档已经将 Redux Toolkit（RTK）放在了开篇的醒目位置，并且打上了「官方推荐」的标签。通过介绍可以了解到，RTK 的主要特性是解决了 Redux 开发中的一些具有代表性的问题，并集成了一些最佳实践，了解它或许可以给技术改进带来一些启发。

此外，团队项目中的 Redux 设计已经很久没有大变更了，显然是可以进一步优化的，RTK 有渐进式改造的可能性，在团队当前技术栈下，有不错的实践推广空间。

从 Redux 的痛点出发

配置繁琐

store 的配置可能是每一个新手的噩梦，一个典型的 store 配置大致如下：

import { applyMiddleware, createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'

import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'

export default function configureStore(preloadedState) {
  const middlewares = [loggerMiddleware, thunkMiddleware]
  const middlewareEnhancer = applyMiddleware(...middlewares)

  const enhancers = [middlewareEnhancer, monitorReducersEnhancer]
  const composedEnhancers = composeWithDevTools(...enhancers)

  const store = createStore(rootReducer, preloadedState, composedEnhancers)

  if (process.env.NODE_ENV !== 'production' && module.hot) {
    module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
  }

  return store
}

虽然这里的代码还没有到不可读的程度，但流程却不够直观：

• createStore(rootReducer, preloadedState, composedEnhancers) 三个参数按照顺序排列，可能会混淆；
• 配置 middlewares 和 enhancers 的方式令人困惑；
• devTools 需要单独的 package 介入，compose 的写法也增加了代码组织的复杂度。

而使用 RTK 的 configureStore 则非常清晰：

import { configureStore } from '@reduxjs/toolkit'

import monitorReducersEnhancer from './enhancers/monitorReducers'
import loggerMiddleware from './middleware/logger'
import rootReducer from './reducers'

export default function configureAppStore(preloadedState) {
  const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware =>
      getDefaultMiddleware().concat(loggerMiddleware),
    preloadedState,
    // devTools: true,
    enhancers: [monitorReducersEnhancer]
  })

  if (process.env.NODE_ENV !== 'production' && module.hot) {
    module.hot.accept('./reducers', () => store.replaceReducer(rootReducer))
  }

  return store
}

configureStore 接受一个 object 参数：

• middleware 和 enhancer 分开配置，并预置了一些 default middlewares：
  • redux-thunk：可能是被使用最多的 middleware；
  • Immutability Middleware：开发环境下，尝试直接修改 state 时报错（FAQ: Why is immutability required by Redux?）；
  • Serializability Middleware：检测 state 和 dispatched actions 中是否使用了 non-serializable values（FAQ: Can I put functions, promises, or other non-serializable items in my store state?）；
• 预置了 devTools，并通过 boolean 控制开关。

样板代码太多