第三章 react redux的学习之redux和react-redux，@reduxjs/toolkit依赖结合使用
redux系列文章目录
第一章 简单学习redux,单个reducer
第二章 简单学习redux,多个reducer
第四章 react-redux，@reduxjs/toolkit依赖，学习
第五章 两张图告诉你redux常使用的api有哪些
前言
前面两章，我们是只使用的redux的依赖。
本章使用讲述的redux，react-redux，和@reduxjs/toolkit三者结合使用。下一章，讲述的是只使用react-redux，和@reduxjs/toolkit开发页面。
一 redux和 react-redux的区别
redux
redux 是支持不同框架（react,vue等）使用，且适用web，react native等环境使用；
react-redux
react-redux是只能react框架，且只适用web环境使用；React-Redux 是 Redux 的 React 官方绑定库，它提供了在 React 应用中使用 Redux 的专用工具和组件,还提供了hooks钩子支持使用。
@reduxjs/toolkit
@reduxjs/toolkit是Redux的进阶版，旨在简化状态管理的开发过程。它不仅包含了Redux的核心功能，还集成了一些最佳实践和工具，使得开发变得更加高效和便捷。
提示：一般框架使用react-redux都会和@reduxjs/toolkit依赖搭配使用。官网文档也是这样推荐使用的
官网地址
二 准备工作
本章基第一章，复制一份counterReducer.js文件改造成counterReducer_react-redux.js。最后看效果。
下载依赖
npm i react-redux @reduxjs/toolkit
新增文件：src/redux/counterReducer_react-redux.js
新增文件：src/pages/couter_react-redux/index.js
counterReducer_react-redux.js文件
import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
name: 'countNumTwo',
initialState: {
value:0
},
reducers: {
increment:state=> {
state.value+=1;
},
decrement:state=> {
state.value-=1;
},
}
})
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
couter_react-redux/index.js
import React, { Fragment } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from '../../redux/counterReducer_react-redux'
export default function CountTwo() {
const count = useSelector(state => state.countNumTwo.value)
const dispatch = useDispatch()
return (
<Fragment>
<div>
当前count:{count}
<br />
<button onClick={() => {
dispatch(increment())
}}>新增count</button>
<button onClick={() => {
dispatch(decrement())
}}>减少count</button>
</div>
<br />
<br />
<br />
</Fragment>
)
}
redux/store.js文件
import { createStore, combineReducers } from 'redux';
import counterReducer from './counterReducer'
import userReducer from './userReducer';
import counterReducerTwo from './counterReducer_react-redux';
//组合多个reducer
const rootReducer = combineReducers({
countNum: counterReducer,
userList: userReducer,
{/* 将新写的reducer加进来*/}
countNumTwo: counterReducerTwo
})
let store = createStore(rootReducer);
export default store
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import './pages/template/styles.css'
import { RouterProvider } from 'react-router-dom';
import routers from './pages/routers';
import { Provider } from 'react-redux';
import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{/* 本章核心代码 ，使用Provider组件；这样整个应用都可以使用store*/}
<Provider store={store}>
<RouterProvider router={routers}/>
</Provider>
</React.StrictMode>
);
reportWebVitals();
提示：我这边应用是配置了路由的，所以看效果视频也是，看/count路径的页面。
最后，将页面couter_react-redux/index.js引进页面couter/index.js中做展示。couter/index.js对应的本地/count路径。嘻嘻。
效果
三个依赖结合效果
三 分析对比
上图对比Count组件和CountTwo组件代码，我们可以发现
使用redux：
1.组件需要引入store,方可以使用dispatch，subscribe方法。store.subscribe是可以监听到其state的变化，但直接将store.getState()放入render中，其实不能获取最新值，需要辅助工具useState才可以拿到最新值，render到页面。
使用react-redux和@reduxjs/toolkit：
1.组件使用useSelector 就可以获取store中的最新值，
2.使用uesdispatch,可以直接传送action给reducer
新属性介绍
Provider组件
< Provider > 组件通过其 store prop 接收 Redux store，并将其传递给其子组件树。这样，任何嵌套在 内的组件都可以通过 Redux 的 connect() 高阶组件或 useSelector 和 useDispatch 钩子访问到这个 store。
createSlice
createSlice 是一个非常实用的工具，它简化了创建和管理Redux切片（slice）的过程。createSlice 函数是 Redux Toolkit 库的一部分，它提供了一个更简洁的方式来定义reducer逻辑和生成action creators。
createSlice 函数接受一个配置对象，这个对象包含几个关键部分：
- name: 切片的名称，用于生成action types。
- initialState: 切片的初始状态。
- reducers: 一个对象，其键是action的类型（通常是小驼峰命名），值是对应的reducer函数。
useSelector
useSelector 钩子允许你从 Redux store 中提取部分 state。当你想要在组件中访问 Redux store 中的数据时，你可以使用 useSelector 来实现。
useDispatch
useDispatch 钩子允许你派发 action 到 Redux store。这对于触发 state 的更新非常有用。useDispatch 返回一个 dispatch 函数，这个函数可以直接用来派发 action。每次调用 dispatch 时，Redux store 会更新，相应的 reducers 会被调用以计算新的 state。
总结
如果你的应用框架是react,建议使用react-redux。因为可以简写很多程序上的使用。
如果你的工作业务涉及到跨框架去开发，建议使用redux.