第三章 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>
                &nbsp;
                <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.