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