redux - 调度 Action 或 reducer ？

Question

我只想指出，我理解 Redux 的标准数据流，你有一个 Action 创建者，它通知 reducer 的类型，reducer 将执行更新状态的魔法。

然而在 React-Redux (redux-toolkit) 中，当我发送一些东西时，它将直接成为一个 reducer，因此从概念上讲，当我想到它时， Action 创建者丢失了，我正在努力理解“reducer”如何确定 Action 类型。

在下面的示例中，我正在调度 setRegistrationData，它是一个 reducer 而不是 action creator。

一些代码示例，看看我的代码是否不正确，而不是我的理解:

调度reducer:

dispatch(setRegistrationData())

商店:

const store : Store = configureStore({
  reducer: {
      modalWindow: modalWindowReducer,
      yPosition : windowYPositionSlice,
      loginData: loginDataSlice,
      formValidation : loginFormValidationSlice,
      registrationData : registrationDataSlice,
  }
})


// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
export default store;

随机切片

// interface RegistrationData
interface RegistrationData{
    userName : string;
    email : string;
    password : string;
    confirmPassword : string;
}

// Need to change it to an object
const initialState : RegistrationData = {
    userName : '',
    email : '',
    password : '',
    confirmPassword : ''
};

export const registrationData = createSlice({
    name: 'registrationData',
    initialState,
    reducers: {
            setRegistrationData(state){
                Object.assign(state, { userName : 'DData', email : 'data@data.com', password : 'dddd', confirmPassword : 'ddd'});
            }
    }
})


export const { setRegistrationData } = registrationData.actions;
export default registrationData.reducer;

Answer 1

使用 RTK API，您抽象了一些旧的 Redux 流程(例如 Action Creators)，但在引擎盖下发生的是完全相同的旧事物。

我认为您的困惑来自 createSlice 方法，它是 RTK 公开的最有用的 API 方法之一:

const registrationData = createSlice({
    name: 'registrationData',
    initialState,
    reducers: {
            setRegistrationData(state){
                Object.assign(state, { userName : 'DData', email : 'data@data.com', password : 'dddd', confirmPassword : 'ddd'});
            }
    }
})

这里发生的是你在 reducers 对象内部编写，一系列 micro reducers(正式命名为 case reducers，因为它们就像单个 case block 在标准 reducer 的 switch 语句中)。他们给出的名称将在内部分配给自动生成的 action creators。所以最终 createSlice 的结果基本上是一个包含 reducer 和 actions 属性的对象，实际上这就是您从通过解构对文件进行切片:

export const { setRegistrationData } = registrationData.actions;

actions 对象包含 action creators，它们采用 case reducers 的名称写入 reducers对象，所以当你发送 setRegistrationData 时:

dispatch(setRegistrationData(data))

(data) 将自动发送到 setRegistrationData case reducer 因为 action.type 是内置在操作中，数据 将成为您操作的有效负载。事实上，如果您在 reducer 中记录操作:

const registrationData = createSlice({
    name: 'registrationData',
    initialState,
    reducers: {
            setRegistrationData(state, action){
                console.log(action) // {type: "registrationData/setRegistrationData", payload : { userName: ..., email: ..., etc... } }
                Object.assign(state, { userName : 'DData', email : 'data@data.com', password : 'dddd', confirmPassword : 'ddd'});
            }
    }
})

您会看到 action 有一个自动生成的 type，其形状为 nameOfReducer/nameOfActionCreator。

正如您所看到的，createSlice 方法只是为您优化了代码，让您编写的代码少了很多，但在本质上，如果您手动编写代码，它是一样的:

const myReducer = (state, action) => {
switch (action.type) {
case "registrationData/setRegistrationData": return {...state, action.payload} // no IMMER
case ... // some other types
  }
}

然后自己构建 Action 创建器:

const setRegistrationData = (data) => ({ type: "registrationData/setRegistrationData" , payload: data})

然后以同样的方式发送:

dispatch(setRegistrationData(data))

那是更多的代码，你不能使用 createSlice 方法中内置的 IMMER。

所以最终只是编写更少的代码，更简洁，更易于阅读和维护，但它不会以任何方式改变 Redux 的工作方式及其流程。