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