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>
相关推荐
西瓜_号码2 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
伟笑4 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
FogLetter5 小时前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
AliciaIr7 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
心.c9 小时前
后台管理系统-权限管理
javascript·react.js·github
杨进军9 小时前
实现 React 函数组件渲染
前端·react.js·前端框架
归于尽9 小时前
被 50px 到 200px 的闪烁整破防了?useLayoutEffect 和 useEffect 的区别原来在这
前端·react.js
杨进军9 小时前
实现 React Fragment 节点渲染
前端·react.js·前端框架
杨进军9 小时前
实现 React 类组件渲染
前端·react.js·前端框架
FogLetter9 小时前
React组件开发之Todos基础:从零打造一个优雅的待办事项应用
前端·javascript·react.js