Estoy aprendiendo Redux y tengo una pregunta sobre más cortes.
Tengo un formulario que consta de varios módulos (formulario de varios pasos). Una porción me ayuda a almacenar el estado del valor de entrada. Y el segundo que quiero usar para validar entradas usando expresiones regulares. Esta validación se verificará después de hacer clic en el siguiente botón.
La pregunta es probablemente una cuestión de convención. Use 2 archivos, por ejemplo, inputSlice.js e isValidSlice.js
¿O usar combineReducers en un archivo inputSlice en su lugar?
Mi segmento actual para almacenar la entrada de valor
import { createSlice } from "@reduxjs/toolkit"; export const inputDataSlice = createSlice({ name: "inputData", initialState: { firstName: null, lastName: null, email: null, phone: null, }, reducers: { setInputData: (state, action) => { const data = action.payload; switch (data.id) { case "firstName": return void (state.firstName = data.value); case "lastName": return void (state.lastName = data.value); case "email": return void (state.email = data.value); case "phone": return void (state.phone = data.value); default: return; } }, }, }); export const { setInputData } = inputDataSlice.actions; export default inputDataSlice.reducer;¡Gracias!
Prefiero usar un segmento de estado para contener las entradas del usuario y el resultado de validación del formulario. Porque el contexto de los datos del formulario ingresados por el usuario y el resultado de la validación de los datos del formulario es el formulario.
Dado que está utilizando RTK, la actualización de datos de estado complejos es fácil. Debido a que RTK usa immer , Immer simplifica el manejo de estructuras de datos inmutables. Lo que significa que no necesita usar Object.assign() o Spread syntax (...) para devolver una copia superficial para cada nivel de la estructura de datos anidados.
El segmento de estado será como:
import { createSlice } from '@reduxjs/toolkit'; export const formSlice = createSlice({ name: 'formData', initialState: { formData: { firstName: null, lastName: null, email: null, phone: null, }, validationResult: { errors: [], }, }, reducers: { setFormData: (state, action) => { const data = action.payload; switch (data.id) { case 'firstName': return void (state.formData.firstName = data.value); case 'lastName': return void (state.formData.lastName = data.value); case 'email': return void (state.formData.email = data.value); case 'phone': return void (state.formData.phone = data.value); default: return; } }, setValidationResult: (state, action) => { state.validationResult.errors = action.payload; }, }, }); export const { setFormData } = formSlice.actions; export default formSlice.reducer;