redux-toolkit的自我理解

最近是看到有同事在更新项目的redux，才知道redux官方更新了一些东西，这个redux-toolkit就是这个更新的最大变化。那它有啥变化呢？那我们就拿以往的redux以及react-redux、redux-thunk等等一些，做一个小比较就知道了。

这里附上它的官方：https://redux-toolkit.js.org

github: https://github.com/reduxjs/redux-toolkit

可以先来个新旧对比

我们以前配置redux，一般都是结合redux-thunk，react-redux已经其他的一些redux-saga等等之类的，例如

store/index.js

import {
    createStore, compose, applyMiddleware } from "redux"
import thunk from "redux-thunk"
import reducer from "./Modules"

// 浏览器的redux调试插件挂载
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
//中间件
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))

export default store

store/Modles/index.js

import {
    combineReducers } from "redux"
import User from "./UserModule/reducer"
import FormModule from "./FormModule/reducer"
//多个reducer
export default combineReducers({
   
    User,
    FormModule
})

一般来说，我们每个reducer都会有四个js文件，action(通知去操作)、reducer(操作)、state(值)、types(每个通知的名称)，这里简单的说一个这几个文件的含义。

在最开始的入口文件

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App' 
import {
    store } from './store' //上面的store/index.js
import {
    Provider } from 'react-redux' 
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
   <Provider store={
   store}> //包裹着App.js
        <App />
    </Provider>
)