Redux-toolkit

1 . 简介

edux Toolkit包旨在成为编写Redux逻辑的标准方式。意在解决 ：

• " 配置 Redux 储存太复杂了"
• " 必须添加很多包才能让 Redux 做任何有意义的事 "
• " Redux 需要太多样板代码 "

2 . API

2 . 1 configureStore()

包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer，添加你提供的任何 Redux 中间件，redux-thunk默认包含，并启用 Redux DevTools Extension。

• 参数为一个对象 ，里面属性有 ：
• reducer 如果这是单个函数，它将直接用作 store 的 root reducer。如果它是 slice reducer 的对象，例如{users : usersReducer, posts : postsReducer}， configureStore将通过将此对象传递给 ReduxcombineReducers实用程序来自动创建根 reducer 。
• middleware 一个可选的 Redux 中间件函数数组 ，默认有 redux - thunk 来实现异步操作 。
• devTools如果这是一个布尔值，它将用于指示是否configureStore应该自动启用对Redux DevTools 浏览器扩展的支持。
• preloadedState​​​要传递给 ReduxcreateStore函数的可选初始状态值。
• enhancers可选的 Redux 存储增强器数组，或用于自定义增强器数组的回调函数。

2 . 2 创建减速器 createReducer()

首选“构建器回调”表示法。

const counterReducer = createReducer(initialState, (builder) => {
   builder.addCase(increment, (state, action) => {
      state.value++
})
    .addCase(decrement, (state, action) => {
     state.value--
})
    .addCase(incrementByAmount, (state, action) => {
     state.value += action.payload
   })
})

此重载接受一个回调函数，该函数接收一个builder对象作为其参数。该构建器提供addCase,addMatcher和addDefaultCase函数，可以调用这些函数来定义此 reducer 将处理的操作。

• addCase处理单个确切的操作类型。
• addMatcher与您自己的过滤器函数匹配。
• addDefaultCase如果没有执行前面的两个则执行该函数

2 . 3 创建动作 createAction()

助手将这createAction两个声明合二为一。它接受一个动作类型并返回该类型的动作创建者。动作创建者可以在没有参数的情况下被调用，也可以payload被附加到动作上。此外，动作创建者会覆盖toString()以便动作类型成为其字符串表示形式。

const increment = createAction('counter/increment')
const decrement = createAction('counter/decrement')

const counterReducer = createReducer(0, (builder) => {
   builder.addCase(increment, (state, action) => state + action.payload)
   builder.addCase(decrement, (state, action) => state - action.payload)
})

2 . 3 创建切片 createSlice()

一个函数，它接受初始状态、reducer 函数的对象和“切片名称”，并自动生成对应于 reducer 和状态的动作创建者和动作类型。在内部，它使用createActionand createReducer

const initialState = { value: 0 }

const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment(state) {
state.value++
},
decrement(state) {
state.value--
},
incrementByAmount(state, action) {
state.value += action.payload
},
},
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer