如何利用Redux Toolkit简化Redux

相识Redux Toolkit,这是用于高效Redux开拓的颠末验证的东西集。在本文中,你将看到为什么Redux Toolkit值得React社区更多的存眷。

React和Redux被认为是大局限React应用中打点状态的最佳组合。然而,跟着时间的推移,Redux的受接待水平下降,原因是:

设置Redux Store并不简朴。

我们需要几个软件包来使Redux与React一起事情。

Redux需要太多样板代码。

带着这些问题,Redux的建设者Dan Abramov颁发了名为《你大概不需要Redux》的文章,发起人们只在需要的时候利用Redux,而在开拓不那么巨大的应用时,要遵循其他要领。

Redux Toolkit办理的问题

Redux Toolkit(之前称为Redux Starter Kit)提供了一些选项来设置全局store,并通过尽大概地抽象Redux API来更精简地建设行动和reducers。

它包罗什么?

Redux Toolkit附带了一些有用的软件包,譬喻Immer,Redux-Thunk和Reselect。它使React开拓人员的事情变得越发轻松,答允他们直接变动状态(不处理惩罚不行变性),并应用Thunk之类的中间件(处理惩罚异步操纵)。它还利用了Redux的一个简朴的“选择器”库Reselect来简化reducer函数。

如何操作Redux Toolkit简化Redux

Redux Toolkit API的主要成果?

以下是Redux Took Kit利用的API函数,它是现有Redux API函数的抽象。这些函数并没有改变Redux的流程,只是以更易读和打点的方法简化了它们。

configureStore:像从Redux中建设原始的createStore一样建设一个Redux store实例,但接管一个定名的选项工具并自动配置Redux DevTools扩展。

createAction:接管一个Action范例字符串,并返回一个利用该范例的Action建设函数。

createReducer:接管初始状态值和Action范例的查找表到reducer函数,并建设一个处理惩罚所有Action范例的reducer。

createSlice:接管一个初始状态和一个带有reducer名称和函数的查找表,并自动生成action creator函数、action范例字符串和一个reducer函数。

您可以利用上述API简化Redux中的样板代码,尤其是利用createAction和createReducer要领。然而,这可以利用createSlice进一步简化,它可以自动生成action creator和reducer函数。

createSlice有什么出格之处?

它是一个生成存储片的助手函数。它接管片的名称、初始状态和reducer函数来返回reducer、action范例和action creators。

首先,让我们看看在传统的React-Redux应用措施中reducers和actions的样子。

Actions

import {GET_USERS,CREATE_USER,DELETE_USER} from "../constant/constants"; export const GetUsers = (data) => (dispatch) => { dispatch({ type: GET_USERS, payload: data, }); }; export const CreateUser = (data) => (dispatch) => { dispatch({ type: CREATE_USER, payload: data, }); }; export const DeleteUser = (data) => (dispatch) => { dispatch({ type: DELETE_USER, payload: data, }); };

Reducers

import {GET_USERS,CREATE_USER,DELETE_USER} from "../constant/constants"; const initialState = { errorMessage: "", loading: false, users:[] }; const UserReducer = (state = initialState, { payload }) => { switch (type) { case GET_USERS: return { ...state, users: payload, loading: false }; case CREATE_USER: return { ...state, users: [payload,...state.users], loading: false }; case DELETE_USER: return { ...state, users: state.users.filter((user) => user.id !== payload.id), , loading: false }; default: return state; } }; export default UserReducer;

此刻,让我们看看如何利用createSlice简化并实现沟通的成果。

import { createSlice } from '@reduxjs/toolkit'; export const initialState = { users: [], loading: false, error: false, }; const userSlice = createSlice({ name: 'user', initialState, reducers: { getUser: (state, action) => { state.users = action.payload; state.loading = true; state.error = false; }, createUser: (state, action) => { state.users.unshift(action.payload); state.loading = false; }, deleteUser: (state, action) => { state.users.filter((user) => user.id !== action.payload.id); state.loading = false; }, }, }); export const { createUser, deleteUser, getUser } = userSlice.actions; export default userSlice.reducer;

正如你所看到的,此刻所有的行动和reducer都在一个简朴的处所,而在传统的redux应用中,你需要在reducer中打点每一个action和它对应的action,当利用createSlice时,你不需要利用开关来识别action。

当涉及到突变状态时,一个典范的Redux流程会抛堕落误,你将需要非凡的JavaScript计策,如spread operator和Object assign来降服它们。由于Redux Toolkit利用Immer,因此您不必担忧会改变状态。由于slice建设了actions和reducers,你可以导出它们,并在你的组件和Store中利用它们来设置Redux,而无需为actions和reducers成立单独的文件和目次,如下所示。

import { configureStore } from "@reduxjs/toolkit"; import userSlice from "./features/user/userSlice"; export default configureStore({ reducer: { user: userSlice, }, });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsjygs.html