Redux Tool Kit(RTK)的使用

一、RTK是什么？

RTK是redux的开发工具,以配置的方式编写redux逻辑,能减少样板代码和错误代码,其中还内置了redux-thunk等一些基础插件, redux官方强烈推荐使用RTK。

二、RTK的使用

2.1 安装

yarn add @reduxjs/toolkit

2.2 使用

action.js

// todoList
const ADD = 'ADD';
const REMOVE = 'REMOVE';
const SET_COMPLETE = 'SET_COMPLETE';
// userInfo
const ADD_USERINFO = 'ADD_USERINFO';
const REMOVE_USERINFO = 'ADD_USERINFO';
// todoList
export function add(id, text) {
return { type: ADD, id, text };
};
export function remove(id) {
return { type: REMOVE, id };
};
export function setComlete(id, complete) {
return { type: SET_COMPLETE, id, complete }
};
// userInfo
export function addUserInfo(userInfo) {
return { ...userInfo, type: ADD_USERINFO };
};
export function removeUserInfo() {
return { type: REMOVE_USERINFO };
};
export default { ADD, REMOVE, SET_COMPLETE, ADD_USERINFO, REMOVE_USERINFO, add, remove, setComlete };

reducer.js

import { createSlice } from '@reduxjs/toolkit';
export const todoListSlice = createSlice({
name: 'todoList',
initialState:
[
{ id: '1', text: '游泳', complete: false },
{ id: '2', text: '冥想', complete: false },
{ id: '3', text: '工作', complete: false },
{ id: '4', text: '午休', complete: false },
{ id: '5', text: '追番', complete: false },
],
reducers: {
add: (state, action) => {
return [...state, { id: action.payload.id, text: action.payload.text, complete: false, }];
},
remove: (state, action) => state.filter(t => t.id !== action.payload.id),
}
});
export const userInfoSlice = createSlice({
name: 'userInfo',
initialState: {},
reducers:{
add: (state, action) => ({ id: action.id, text: action.text, complete: false }),
remove: (state, action) => state.map(t => t.id === action.id ? t : { ...t, complete: action.complete })
},
});

store.js

import { todoListSlice, userInfoSlice } from './reducer';
import { configureStore
} from
'@reduxjs/toolkit';
const store = configureStore({
reducer:{ todoList: todoListSlice.reducer,userInfo: userInfoSlice.reducer}
})
export default store;

List.jsx

import { memo, useCallback, useState, useMemo } from 'react';
import { Input, Button } from 'antd';
import { connect } from 'react-redux';
import { todoListSlice } from './reducer';
// 将redux的state映射到props
const mapStateToProps = (state) => {
return { todoList: state.todoList };
};
// 将redux的dispatch映射到props
const mapDispatchToProps = (dispatch) => {
return {
onAdd: (id) => dispatch(todoListSlice.actions.add({ id, text: `新增数据${id}` })),
onRemove: (id) => dispatch(todoListSlice.actions.remove({ id })),
}
};
// 实现一个TodoList
function List(props) {
const [id, setId] = useState('0');
const onInputChange = useCallback((e) => {
setId(e.target.value);
}, []);
const renderList = useMemo(() => {
console.log(props.todoList, 'props.todoLis')
return props.todoList.map(todo => {
return <div style={{ marginTop: '20px' }} key={todo.id}>
<div>名称:{todo.text}</div>
<div>ID:{todo.id}</div>
<div>状态:{todo.complete ? '完成' : '未完成'}</div>
</div>
})
}, [props.todoList]);
return (
<div className="App" style={{ textAlign: 'center' }}>
<span>id:
<Input onChange={onInputChange} value={id} type='text' /></span>
<Button onClick={() => props.onAdd(id)}>增加</Button>
<Button onClick={() => props.onRemove(id)}>删除</Button>
{renderList}
</div>
);
}
export default memo(connect(mapStateToProps, mapDispatchToProps)(List));

传送门: RTK

最后

以上就是个性小笼包为你收集整理的Redux Tool Kit(RTK)的使用的全部内容，希望文章能够帮你解决Redux Tool Kit(RTK)的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。