Блог

Я использую react, react-redux и redux-сохраняюсь в своем приложении. Когда я отправляю форму каждый раз, когда создается массив вложенных объектов. Повторное сохранение кажется работающим, потому что данные формы успешно можно сохранить в локальном хранилище. Однако самая запутанная часть заключается в том, что я не знаю, почему вложенные объекты создавались каждый раз.

Магазин

 import {createStore, applyMiddleware} from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
import {composeWithDevTools} from 'redux-devtools-extension'
import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  storage,
}

// const initialState = {}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const configureStore = () => {
  let store = createStore(persistedReducer, composeWithDevTools(applyMiddleware()))
  let persistor = persistStore(store)
  return { store, persistor }
}
export default configureStore;


 

Действия

 import { v4 as uuidv4 } from 'uuid' 
export const ADD_ARRAY_CHALLENGE = "ADD_ARRAY_CHALLENGE";



export const addArrayChallenge = name => ({
  type: "ADD_ARRAY_CHALLENGE",
  id: uuidv4(),
  name
});
 

редуктор

 import {ADD_ARRAY_CHALLENGE} from './../actions'


export const arrayFormReducer = (state = [] , action) => {
  switch(action.type) {
    case ADD_ARRAY_CHALLENGE:
      return [
        state, {
          id: action.id,
          name: action.name
        }
      ]
    default:
      return state
  }
}
 

Объединитель воспитатель

 import { combineReducers } from 'redux';
import {arrayFormReducer} from './arrayFormReducer'

const rootReducer = combineReducers({
  arrayForm: arrayFormReducer
})

export default rootReducer
 

Я действительно ценю вашу помощь. Спасибо.

Обратите внимание на распространение предыдущего состояния:

 case ADD_ARRAY_CHALLENGE:
    return [
        ...state, 
        {
            id: action.id,
            name: action.name
        }
    ]
 

Это происходит потому, что вы возвращаете объект состояния в редукторе, его вложенность сама по себе создает вложенный объект. Используйте оператор распространения внутри каждого СЛУЧАЯ. Он добавит все остальные свойства состояния в возвращаемый объект, и после этого вы сможете добавить новое / переопределить состояние

 import {ADD_ARRAY_CHALLENGE} from './../actions'


export const arrayFormReducer = (state = [] , action) => {
  switch(action.type) {
    case ADD_ARRAY_CHALLENGE:
      return [
        ...state, {
          id: action.id,
          name: action.name
        }
      ]
    default:
      return state
  }
}