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>
相关推荐
巴巴_羊9 小时前
React Ref使用
前端·javascript·react.js
杨进军10 小时前
React 协调器 render 阶段
前端·react.js·前端框架
归于尽10 小时前
智能前端小魔术,让图片开口说单词
前端·react.js
杨进军10 小时前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
杨进军12 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
Spider_Man14 小时前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
白瓷梅子汤17 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
1234Wu18 小时前
React Native 接入 eCharts
javascript·react native·react.js
小白变怪兽1 天前
一、react18+项目初始化(vite)
前端·react.js
然我2 天前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html