react redux和@reduxjs/toolkit工具

1,安装

复制代码
npm i @reduxjs/toolkit react-redux

2,目录

  • store
    • modules
      • counterStore.js
    • index.js

3,最外层index.js引入

javascript 复制代码
import store from './store'
import { Provider } from 'react-redux'
  <Provider store={store}>
    <App />
  </Provider>

4,编写counterStore.js

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

const counterStore = createSlice({
  name: 'counter',
  // 初始化state
  initialState: {
    count: 0
  },
  // 修改状态的方法 同步方法 支持直接修改
  reducers: {
    inscrement (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  }
})

// 解构出来actionCreate函数
const { inscrement, decrement } = counterStore.actions

// 获取reducer
const reducer = counterStore.reducer

// 以按需的方式导出actionCreate
export { inscrement, decrement }

// 以默认导出方式导出reducer
export default reducer

5,store/index.js引入子模块

javascript 复制代码
import { configureStore } from "@reduxjs/toolkit"
// 导入子模块reducer
import counterReducer from "./modules/counterStore"

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

export default store

6,相应文件调用

javascript 复制代码
import { useSelector, useDispatch } from "react-redux"
// 导入创建action对象的方法
import { inscrement, decrement } from "./store/modules/counterStore"

function App () {
  // 这里的state.counter的counter与store/index.js下的counter相对应
  const { count } = useSelector(state => state.counter)
  // 得到dispatch函数
  const dispatch = useDispatch()
  return (
    <div className="App">
      {/* 调用dispatch提交action对象 */}
      <button onClick={() => dispatch(inscrement())}>++</button>
      {count}
      <button onClick={() => dispatch(decrement())}>--</button>
    </div>
  )
}

export default App

7,提交action传参实现需求

在reducers的同步修改方法中添加action对象参数,在调用actionCreater的时候传递参数,参数会被传递到action对象payload属性上

javascript 复制代码
// counterStore.js
  reducers: {
    // 传参
    addToNumber (state, action) {
      state.count = action.payload
    }
  }
  // 添加addToNumber
const { addToNumber } = counterStore.actions
export { addToNumber }

使用

javascript 复制代码
import { addToNumber } from "./store/modules/counterStore"
<button onClick={() => dispatch(addToNumber(10))}>to 10</button>
相关推荐
天蓝色的鱼鱼15 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong19 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户76787977373220 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪1 天前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码1 天前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农1 天前
【React用到的一些算法】游标和栈
算法·react.js
小高0071 天前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
江城开朗的豌豆1 天前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆1 天前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
遂心_2 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js