Блог

Я создаю хранилище своего приложения:

 import {configureStore} from '@reduxjs/toolkit';
import {persistStore, persistReducer} from 'redux-persist';
import createFilter from 'redux-persist-transform-filter';
import storage from 'redux-persist/lib/storage';
import rootReducer from './rootReducer';

const whiteListFilter = createFilter('references', 'label');

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});
const persistor = persistStore(store);


export {store, persistor};
  

и referenceSlice.js:

 import {createSlice} from "@reduxjs/toolkit"


const initialState = {
label: '',
references: [],
error: '',
}

const referenceSlice = createSlice({
name: 'reference',
initialState,
reducers: {
 updateReference(state, action){
  state = Object.assign(state, action.payload);
}
}
});

export default referenceSlice.reducer;
export const {updateReference} = referenceSlice.actions
  

Presentation.jsx:

 import React from 'react';
import {useDispatch} from 'react-redux';
import {updateReference} from 'referenceSlice';


const Presenter = () => {
const dispatch = useDispatch();
const [label, setLabel] = React.useState('');
const [error, setError] = React.useState('');
const [touched, setTouched] = React.useState(false);

const handleChange = (e) => {
 setLabel(e.target.value);
}

const handleBlur = (e) => {
 setTouched(true)
if(e.target.value) {
  dispatch(updateReference(label));
}else {
 setError('required*')
}
}

return(
 <div>
   <TextField
     label='Reference label'
     onChange={handleChange}
     onBlur={handleBlur}
     helperText={touched amp;amp; error ? error : ''}
    />
   <OtherComponent />
</div>
);

export default Presenter;
  

Проблема здесь в том, что я хочу сохранить только некоторые атрибуты из редуктора ссылок, но в этом случае весь редуктор был сохранен. Как я могу это исправить?

Redux-persist ищет массив в фильтре белого списка, это должны быть имена ключей в вашем rootReducer.

См. https://github.com/rt2zz/redux-persist#blacklist—whitelist

 // WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};
  

Также полезно отметить, что внесение вложенных атрибутов в черный список возможно, просто сделано немного странным способом, когда вам нужно занести в черный список полный редуктор и создать отдельную конфигурацию для занесенного в черный список редуктора, в котором в черный список занесены только некоторые атрибуты.

https://github.com/rt2zz/redux-persist#nested-persists