React Native+ RTK + persist + AsyncStorage 연습용

dongwookim·2024년 5월 22일
0
> redux/reducers/Categories.ts
import {createSlice} from "@reduxjs/toolkit"

const initialState = {
	categories: [
      {
        categoryId: 1,
      	name: 'John'
      },
      {
        categoryId: 2,
        name: 'Adam'
      }
    ]
}

const Categories = createSlice({
	name: 'categories',
  	initialState,
  	reducers: {
    	resetCategories: () => {
        	return initialState
        }
    }
})

export const {resetCategories} = Categories.actions
export default Categories.reducer
> redux/store.ts
import {combineReducers, configureStore} from '@reduxjs/toolkit'
import AsyncStorage from "@react-native-async-storage/async-storage"
import {persistReducer, persistStore} from 'redux-persist'
import Categories from './reducers/Categories'


const rootReducer = combineReducers({
	categories: Categories
});

const configuration = {
	key: 'root',
  	storage: AsyncStorage,
  	version: 1
}


const persistedReducer = persistReducer(rootReducer,configuration);
const store = configureStore({
	reducer: persistedReducer,
  	middleWare: getDefaultMiddleware => {
    return getDefaultMiddleware({
      serializableCheck: false,
    });
});
export default store
export const persistor = persistStore(store);
>App.tsx
import {Provider} from 'react-redux'
import store, {persistor} from './redux/store'
import {PersistGate} from 'redux-persist/integration/react'

<Provider store={store}>
	<PersistGate persistor={persistor} loading={null}>
  		...
  	</PersistGate>
</Provider>
profile
Practice makes perfect

0개의 댓글