Redux Toolkit 基础入门
大家好，我是 Brittney，我是ZTM Academy的讲师，也是bDesigned的所有者、设计师和开发者。您可以在Console Logs上找到我撰写的更多开发笔记。
简而言之：Redux Toolkit 是向应用程序添加 Redux 的全新官方方式。它允许您使用更少的代码来设置和添加数据项到您的 store 中。查看代码或演示。
目录
Redux Toolkit是什么？
Redux Toolkit 是将 Redux 集成到项目中的全新官方方式。它旨在解决开发者在使用原版 Redux 包时遇到的一些常见问题，例如配置过多、过于复杂以及需要过多插件包才能正常运行。使用 Toolkit，配置更少，底层工作也更加完善，并且集成了用于异步 thunk 的中间件。原版 Redux 包非常灵活，允许用户自行选择要使用的插件，而新的 Redux Toolkit 则更加灵活，因为它开箱即用地包含了所需的插件。您可以将 Redux Toolkit 视为 Redux 版的 Create React App，因为它提供了许多可以帮助您快速入门的工具。以下是 Redux Toolkit文档中列出的新 API ：
- ♦
configureStore()：createStore提供简化的配置选项和良好的默认值。它可以自动合并你的切片 reducer，添加你提供的任何 Redux 中间件redux-thunk（默认包含），并启用 Redux DevTools 扩展。 - ♦
createReducer()：它允许你向 case reducer 函数提供操作类型的查找表，而不是编写 switch 语句。此外，它还会自动使用该immer库，让你能够使用普通的可变代码编写更简单的不可变更新，例如state.todos[3].completed = true。 - ♦
createAction()：为给定的动作类型字符串生成一个动作创建函数。该函数本身已toString()定义，因此可以代替类型常量使用。 - ♦
createSlice(): 接受 reducer 函数对象、切片名称和初始状态值，并自动生成具有相应 action creators 和 action 类型的切片 reducer。 - ♦
createAsyncThunk：接受一个 action 类型字符串和一个返回 Promise 的函数，并生成一个 thunk，该 thunkpending/fulfilled/rejected根据该 Promise 分发 action 类型。 - ♦
createEntityAdapter: 生成一组可重用的 reducer 和 selector 来管理 store 中的规范化数据。 - ♦
createSelector- 来自 Reselect 库的实用程序，为了方便使用而重新导出。
为什么选择 Redux Toolkit？
正如我上面提到的，使用 Redux Toolkit 将大大简化 Redux store 的配置和设置。这将使您能够更快地开始编码，并简化向 store 中添加新项的过程。虽然打包后的文件大小会比原始 Redux 包更大，但 RTK 团队一直在努力改进 tree-shaking 技术以减小其体积。由于 Redux Toolkit 会安装各个独立的包，因此您可以随时选择删除不使用的组件。此外，它还优先使用 Redux Thunk redux-thunk，redux-saga您可以根据需要进行替换。如果您想了解更多信息，请参阅“为什么 RTK 使用 Redux Thunk 而不是 Redux Saga” 。
使用 Redux Toolkit
使用 Redux Toolkit 启动一个新项目：
npx create-react-app my-app-name --template redux
如果是 React 项目，您还需要react-reduxRedux Toolkit。要将 Redux Toolkit 添加到现有应用：
// NPM
npm i @reduxjs/toolkit
// With React
npm i @reduxjs/toolkit react-redux
// Yarn
yarn add @reduxjs/toolkit
// With React
yarn add @reduxjs/toolkit react-redux
如果你使用的是 Redux 的原生包，你可能会认为 `<script>` 和 `<script>`createAction()文件createReducer()是你首先需要配置的文件。虽然你仍然可以那样配置，但大多数情况下，你只需要一个createSlice()函数即可。它会接受一个切片名称字符串、一个初始状态和一个 reducer 函数对象作为参数，并自动生成与 reducer 和状态对应的 action 创建器和类型。它实际上将 3 个文件合并成了 1 个。创建一个 redux 文件夹和一个 `<script>`todosSlice.js文件。让我们来看一个用于设置待办事项的切片示例。
import { createSlice } from '@reduxjs/toolkit'
let nextTodoId = 0
const todosSlice = createSlice({
// slice name
name: 'todos',
// initial state
initialState: [
{
id: 1,
desc: 'name slice',
isComplete: true
},
{
id: 2,
desc: 'set initial state',
isComplete: true
},
{
id: 3,
desc: 'create reducer',
isComplete: false
}
],
// object of reducer functions
reducers: {
// action
create: {
reducer(state, { payload }) {
const { id, desc } = payload
state.push({ id, desc, isComplete: false })
},
prepare(desc) {
return {
payload: {
desc,
id: nextTodoId++
}
}
}
},
// action
toggle: (state, { payload }) => {
// reducer
const todo = state.find(todo => todo.id === payload.id)
if (todo) {
todo.isComplete = !todo.isComplete
}
},
// action
remove: (state, { payload }) => {
// reducer
const idx = state.findIndex(todo => todo.id === payload.id)
if (idx !== -1) {
state.splice(idx, 1)
}
}
}
})
// destructuring actions and reducer from the slice
const { actions, reducer } = todosSlice
// destructuring actions off slice and exporting
export const { create, toggle, remove } = actions
// export reducer
export default reducer
接下来，我们需要创建一个rootReducer.js文件来合并我们商店的 reducer。
import { combineReducers } from '@reduxjs/toolkit'
// import the reducer as todosReducer
import todosReducer from './todosSlice'
export default combineReducers({
// other slices would be added here
todos: todosReducer
})
最后，我们只需要配置商店。您可以通过创建一个store.js文件或将其包含在index.js.
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './rootReducer'
const store = configureStore({
reducer: rootReducer
})
export default store
现在index.js，我们需要将Provider包裹在我们的主组件周围。
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import * as serviceWorker from './serviceWorker'
import store from './redux/store'
import { Provider } from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
serviceWorker.register()
现在我们可以使用react-redux hooks 将我们的 Redux store 引入到我们的应用程序中。
import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { create, toggle, remove } from '../redux/todosSlice'
import './App.css'
const App = () => {
const dispatch = useDispatch()
// get todos from state
const todos = useSelector(state => state.todos)
const completed = useSelector(state => state.todos.isComplete)
const [todoInput, setTodoInput] = useState('')
const handleInputChange = e => {
setTodoInput(e.target.value)
}
const handleNewTodo = e => {
e.preventDefault()
// if no input, just return
if (!todoInput.length) return
// dispatch will send our create action
dispatch(create(todoInput))
// reset input
setTodoInput('')
}
const handleToggle = id => {
// send toggle action updated state
dispatch(
toggle({
id,
isComplete: !completed
})
)
}
return (
<div className='App'>
<div className='App__header'>
<h1>Todo: RTK Edition</h1>
<form onSubmit={handleNewTodo}>
<label htmlFor='new-todo' style={{ display: 'none' }}>
New Todo:
</label>
<input
onChange={handleInputChange}
id='new-todo'
value={todoInput}
placeholder='todo...'
/>
<button type='submit'>Create</button>
</form>
</div>
<div className='App__body'>
<ul className='App__list'>
{todos.map(todo => (
<li
className={`${todo.isComplete ? 'done' : ''}`}
key={todo.id}
onClick={() => handleToggle(todo.id)}>
{todo.desc}
</li>
))}
</ul>
</div>
</div>
)
}
export default App
搞定！Redux Toolkit 已经设置完毕并连接到我们的应用程序。这是一个基础教程，下次我们将深入学习 RTK！感谢大家的支持！❤️
文章来源：https://dev.to/brittneypostma/redux-toolkit-basic-intro-57g4