redux 结合 @reduxjs/toolkit 的使用

1,使用步骤

使用React Toolkit 创建 counterStore(store目录下) --> 为React注入store(src下面的index) --> React组件使用store中的数据(组件)

2,例如下面有一个简单加减的案例

先来看一下项目目录

counterStore代码:

复制代码
import { createSlice } from '@reduxjs/toolkit'

const counterStore = createSlice({
  // 模块名称独一无二
  name: 'counter',
  // 初始数据
  initialState: {
    count: 1
  },
  // 修改数据的同步方法
  reducers: {
    increment (state) {
      state.count++
    },
    decrement(state){
      state.count--
    }
  }
})
// 结构出actionCreater
const { increment,decrement } = counter.actions

// 获取reducer函数
const counterReducer = counterStore.reducer

// 导出
export { increment, decrement }
export default counterReducer

store下面 index 的代码:

复制代码
import { configureStore } from '@reduxjs/toolkit'

import counterReducer from './modules/counterStore'

export default configureStore({
  reducer: {
    // 注册子模块
    counter: counterReducer
  }
})

src下面index 的代码:

复制代码
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 导入store
import store from './store'
// 导入store提供组件Provider
import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(
  // 提供store数据
  <Provider store={store}>
    <App />
  </Provider>
)

App的代码:

复制代码
import { useSelector, useDispatch } from 'react-redux'
import {decrement,increment} from './store/modules/counterStore'

function App(){
  const dispatch = useDispatch()
  // 错误使用
  // const count = useSelector(state=>state.counter)
  // 正确使用
  const {count} = useSelector(state=>state.counter)
  return (
    <div>
      <button onClick={()=>dispatch(decrement())}>-</button>
      <h1>
        {count}
      </h1>
      <button onClick={()=>dispatch(increment())}>+</button>
    </div>
  );
}

export default App;

页面是这样的,点击加减数字就会改变了

相关推荐
海底火旺几秒前
聊一聊JavaScript中的立即执行函数(IIFE)
前端·javascript
767560479几秒前
useMemoize 方法源码解读与实战应用
前端·源码
胡乱儿起个名1 分钟前
C++的指针数组、数组指针和指针数组指针
开发语言·c++
青青奇犽1 分钟前
跨域问题全解析:七种方法轻松拿捏跨域
前端·javascript·面试
loooseFish2 分钟前
使用canvas模拟 美图AI画质消除中 选中区域上传(第一次正式使用canvas小记)
前端
kill bert5 分钟前
第32周Java微服务入门 微服务基础
java·开发语言·微服务
学c真好玩7 分钟前
4.1-python操作wrod/pdf 文件
开发语言·python·pdf
姜行运7 分钟前
数据结构【链表】
c语言·开发语言·数据结构·链表
山山而川粤10 分钟前
SSM考研信息查询系统
java·大数据·运维·服务器·开发语言·数据库·考研
林十一npc16 分钟前
MySQL索引与视图综合应用示例解析
android·前端·mysql