reducex详解

redux介绍

reducer可以作为一个外部管理state库,存储吧筛选出需要用到的控制state状态的方法。比父子通信,变量提升更方便。可搭配react,vue等不同框架使用。

原理

由官网所示,UI组件触发后先从dispatch中调用action方法,再由store向reducer发起状态更改的函数。

使用

基础使用方法

第一步. 下面是在子模块里定义reducer

使用'@redux.js/tookit'创建consterStore。

js 复制代码
import { createSilce } from '@redux.js/tookit'
const consterStore = createSilce({
  name: 'counter',
  //初始化
  initialState: {
    count: 0,
  },
  //修改状态的方法
  reducers: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
    addTonum(state,action){
      state.count=action.payload
    }
  },
})
//解构出函数
const { increment, decrement } = consterStore.actions
//获取reducer
const reducer = consterStore.reducer
//已按需导出的方式导出actionCreater
export {increment,decrement,addTonum}
//默认导出reducer
export default reducer

其中state.count=action.payload可以传递参数

第二步. 下面是在入口文件里index.js组合子模块

js 复制代码
import {configureStore}from '@reduxjs/toolkit'
//导入子模块中的reducer
import {counterReducer}from'./modulses/counterStore'
//创建根store组合子模块
const store=configureStore(
{  reducer:{
    counter:counterReducer
  }
})
//导出根store
export default store

counter就是定义reducer时起的name

第三步. 用redux-react中Provider在App.jsx中连接

js 复制代码
import store from './store'
import {Provider}from 'react-redux'
const root = ReactDOM. createRoot(document.getElementById('root'))
root. render(
<React.StrictMode>
<Providerstore={store}>
<App />
</Providerstore>
</React.StrictMode>
)

第四步. 在组件中使用

js 复制代码
//用钩子函数-useSelector把store中数据映射到组件中
import {useSelector}from'react-redux'
import {increment,decrement,addTonum}from'./modules/counterStore'
import {dispatch}from'react-redux'
function App(){
  const {count}=useSelector(state=>state.counter)
  const dispatch=useDispatch()
  return(
    <div>
      {count}
      <button onClick={()=>dispatch(increment())}>+</button>
      <button onClick={()=>dispatch(decrement())}>-</button>
      <button onClick={()=>dispatch(addTonum(10))}>-</button>
    </div>
  )
}
export default App

异步操作

第一步.创建store的写法保持不变,配置好同步修改状态的方法

js 复制代码
const createList= createSilce({
  name:'list',
  initialState:{
    List:[]
  },
  reducer:{
    receive(state,action){
      state.List=action.payload
    }
  }
})
const {receive}=createList.action
js 复制代码
// 2. 单独封装一个函数,在函数内部return一个新函数,在新函数中
// 2.1 封装异步请求获取数据(还在一个文件)
const fetchList=()=>{
  return ((dispatch)=>{
    async function fetch(params) {
     const res=await axios.get()
     dispatch(receive(res.data.data.createList))
    }
  })
}
const reducer=createList.reducer
export {fetchList}
export default reducer

第二步;下面是在入口文件里index.js组合子模块

js 复制代码
import {configureStore}from '@reduxjs/toolkit'
//导入子模块中的reducer
import {counterReducer}from'./modulses/counterStore'
import {createList}from'moudel/store/createList'
//创建根store组合子模块
const store=configureStore(
{  reducer:{
    counter:counterReducer
    list:createList
  }
})
//导出根store
export default store

第三步在组将中使用

js 复制代码
import {useEffect}from'react'
import {useDispatch,useSelector}from'react-redux'
import {increment,decrement,addTonum}from'./modules/counterStore'
import {createList}from'./modules/createList'
function App(){
  const {count}=useSelector(state=>state.counter)
  const {List}=useSelector(state=>state.List)
  const dispatch=useDispatch()
  // 2.2调用同步actionCreater传入异步数据生成一个action对象,并使用dispatch提交
useEffect(()=>{
  dispatch(receive())
},[dispatch])

  return(
    <div>
      {count}
      <button onClick={()=>dispatch(increment())}>+</button>
      <button onClick={()=>dispatch(decrement())}>-</button>
      <button onClick={()=>dispatch(addTonum(10))}>-</button>
{List.map((item)=><li key={item.id}>item.text</li>)
}    </div>
  )
}
export default App
相关推荐
hepherd17 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI17 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见19 分钟前
浅拷贝与深拷贝
前端
前端飞天猪24 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡25 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克27 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
奇怪的知识又增长了36 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端
Maofu36 分钟前
从React项目 迁移到 Solid项目的踩坑记录
前端
薄荷味36 分钟前
ubuntu 服务器安装 docker
前端
Carlos_sam37 分钟前
OpenLayers:如何控制Overlay的层级?
前端·javascript