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></>
	)
}