Redux 状态管理工具

一、Redux的安装

npm install redux

二、Redux的核心

1、action

  1. 动作对象
  2. 属性 type:标识,值为字符串、唯一,必要。data:数据,值类型不限,可选
  3. 例子: const action = {type: ‘ADD_COUNT’, data: 888}
  4. 提交action store.dispatch( action )

2、reducer

  1. 用于初始化状态,修改状态
  2. 是根据旧的state和action,生成新的state的一个纯函数

3、store

  1. 将state、action、reducer联系在一起的对象

二、Redux的简单使用

创建action


const ADD_COUNT= (data)=>{
   return {type:'ADD_COUNT',
        data:data
    }
}  

const REDUCE_COUNT= (data)=>{
    return {
        type:'REDUCE_COUNT',
        data,
    }
}

export {ADD_COUNT,REDUCE_COUNT};

创建reducer

// 1.reducer本质就是一个函数
// 2.reducer函数会接到两个参数,分别为:之前的状态(state),动作对象(action)

function reducer(count=10,action){
    const {type,data} = action;
    switch(type){
        case 'ADD_COUNT':
            return count + data
        case 'REDUCE_COUNT':
            return count- data
        default:
            return count; 
    }
}

export default reducer;


创建store

// 暴露一个store对象,整个应用只有一个store对象
// 引入createStore创建store对象
import {createStore} from 'redux'
import reducer from 'count_reducer'
const store = createStore(reducer);
export default  store;

绑定到项目根结点

<Provider store={store}>
  <App />
</Provider>

组件中使用

  • 获取state
const state = store.getState()
console.log(state.count)
  • 提交action
store.dispatch(ADD_COUNT(12))
store.dispatch(REDUCE_COUNT(12))
  • 监听state
store.subscribe(()=>{
	console.log(store.getState())
})
  • 取消监听
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);
 
unsubscribe();

三、React-Redux的使用

安装依赖包

  • react-redux
npm install react-redux
  • @reduxjs/toolkit (简化书写样式)
npm install @reduxjs/toolkit

创建reducer

import {createSlice} from '@reduxjs/toolkit';
import axios from "axios";
const testStore = createSlice(
	{
		name: 'test',
		//数据状态state
		initialState:{
			testList:[]
		},
		reducers: {
			//同步修改方法
			setTestList(state, action) {
				state.testList = action.payload
			}
		}
	}
)
//解构actionCreater函数
const {setTestList} = testStore.actions
//异步函数
const getTestList = ()=>{
	return async(dispatch) =>{
		const res = await axios.get('')
		dispatch(setTestList(res.data))
	}
}


//导出异步方法获取数据,不是异步的时候可以导出解构出来的同步方法
export {geteTestList, setTestList}

//导出reducer
const reducer = testStore.reducer
export default reducer

创建store

import { configureStore } from '@reduxjs/toolkit'
import testReducer from './modules/testStore'
const store = configureStore({
    reducer: {
        bill:testReducer 
    }
})

export default store

绑定到项目根结点

<Provider store={store}>
  <App />
</Provider>

组件中获取

import { useSelector } from 'react-redux'
const Demo = () ={
	const testList = useSelector(state=> state.test.testList)
	console.log(testList )
	return (
		<><div>Demo</div></>
	)
}

组件中修改

import { useDispatch } from 'react-redux'
import getTestList from './modules/testStore'
const Demo = () ={
	const dispatch = useDispatch()
    useEffect(() => {
        console.log('ee')
        dispatch(getTestList())
    }, [dispatch])
	return (
		<><div>Demo</div></>
	)
}
  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值