redux-toolkit怎么用?
时间: 2023-09-09 17:11:56 浏览: 68
要使用Redux Toolkit,首先需要安装Redux Toolkit和react-redux插件。可以使用以下命令来安装它们:
npm install @reduxjs/toolkit react-redux
然后,在你的应用程序中引入Redux Toolkit。你可以使用以下代码来引入它:
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
接下来,你可以使用configureStore函数来创建一个Redux store。configureStore函数提供了简化的配置选项和良好的默认值。它会自动组合你的slice reducer,并添加你提供的任何Redux中间件。它还会默认包含redux-thunk,并启用Redux DevTools Extension。
以下是一个使用Redux Toolkit的基本示例:
```
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
import rootReducer from './reducers'
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(yourMiddleware),
devTools: process.env.NODE_ENV !== 'production',
})
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
```
在这个示例中,我们首先引入了configureStore函数和Provider组件。然后,我们创建了一个store,传入了一个rootReducer作为reducer参数。我们还可以通过middleware参数添加任何中间件,以及通过devTools参数启用Redux DevTools Extension。
最后,我们使用Provider组件将store传递给应用程序的根组件。这将使整个应用程序都可以访问Redux store。
这是一个基本的Redux Toolkit的用法示例,你可以根据自己的需求进行配置和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Redux工具包(一) - Redux Toolkit的基本使用](https://blog.csdn.net/m0_71485750/article/details/126764581)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]