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;

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

相关推荐
胡八一6 分钟前
如何在 Dialog 中安全初始化 ECharts 并自动监听容器大小变化
前端·安全·echarts
梦境之冢13 分钟前
在 Vue3 中封装的 Axios 实例中,若需要为部分接口提供手动取消请求的功能
javascript·vue.js
qq_456001651 小时前
在Vue3中,如何在父组件中使用v-model与子组件进行双向绑定?
前端·javascript·vue.js
Mr Aokey1 小时前
手写Java线程池与定时器:彻底掌握多线程任务调度
java·开发语言
✿ ༺ ོIT技术༻2 小时前
笔试强训:Day2
开发语言·c++·笔记·算法
Jackson@ML3 小时前
如何快速高效学习Python?
开发语言·python
sunbyte4 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
西瓜本瓜@5 小时前
在Android中如何使用Protobuf上传协议
android·java·开发语言·git·学习·android-studio
UFIT5 小时前
Python函数与模块笔记
开发语言·python
机智的人猿泰山5 小时前
java kafka
java·开发语言·kafka