redux 切片机、动作机和还原机,它们是什么?

gjmwrych  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(94)

我正在学习Redux,我遇到了这个代码:

reducers: {
    loginStart: (state) => {
      //...
    },
    loginSuccess: (state, action) => {
      //...
    },
    loginFailure: (state) => {
      //...
    },
    logout: (state) => {
      //...
    },
  },
});
export const { loginStart, loginSuccess, loginFailure, logout } = userSlice.actions;
export default userSlice.reducer;

我不能很好地理解什么是.actionsSlice.reducerreducers来自不同的网络资源。所以,请哪位ReduxMaven在这里用一种简单的方式解释一下什么是论文和它们的作用?

qojgxg4l

qojgxg4l1#

应用的每个状态(全局)都存在于存储在单个存储中的对象树中。
操作只是JavaScript对象,它的类型包含一个数据有效负载,可以准确地说明正在发生的事情。它们的作用是什么?它们是管理状态树的唯一方法。注意:迄今为止还没有任何状态发生突变。
reducer只是对我们的不可变状态执行的相应调用操作的响应,从而返回一个新的状态。您也可以选择检查Array.reduce()方法以更好地理解reducer。
那么slice是什么呢?因为它是redux-toolkit自带的,slice包含了一个特性的所有reducer逻辑和动作。它会自动生成你的动作创建者和类型,你必须在redux-toolkit之前将它们定义为常量。查看createSlice以获得完整的解释。
在您的示例中,名为reducers的对象进入createSlice,并带有初始状态和名称。
根据以上所述,这是您的问题的最后一个示例:

const initialState = {}
const authSlice = createSlice({
    name: 'authentication',
    initialState,
    reducers: {
        loginStart: (state) => {
          //...
        },
        loginSuccess: (state, action) => {
          //...
        },
        loginFailure: (state) => {
          //...
        },
        logout: (state) => {
          //...
        },
    },
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

相关问题