[내일배움캠프 TIL] 53일차

오늘 새로 배운 것

React Native에 react-redux, toolkit 적용

App.js 부분

1 react-redux, toolkit 패키지 설치
2 App.js에 Provider, store import
3 jsx 구문 return 안에 가장 외부에 Provider 추가

import { Provider } from 'react-redux';
import store from './redux/config/configStore';

const queryClient = new QueryClient();

export default function App() {
  const isDark = useColorScheme() === 'dark';

  return (
    <Provider store={store}>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
          <NavigationContainer theme={isDark ? DarkTheme : DefaultTheme}>
            <Root />
          </NavigationContainer>
        </ThemeProvider>
      </QueryClientProvider>
    </Provider>
  );
}

redux 부분

configureStore 구성

import { configureStore } from '@reduxjs/toolkit';
import selection from '../../redux/modules/selection';

const store = configureStore({
  reducer: {
    selection,
  },
});

export default store;

modules 부분 구성

import { createSlice } from '@reduxjs/toolkit';

const initialState = {};

const selectedSlice = createSlice({
  name: 'selection',
  initialState,
  reducers: {
    updateSelection: (state, action) => {
      state.selection = action.payload;
    },
  },
});

export const { updateSelection } = selectedSlice.actions;
export default selectedSlice.reducer;

사용하는 페이지 부분

navigate 내 params로 다른 페이지로 넘기던 값을 action에 payload로 실어 dispatch하는 방식으로 리팩터링.

값을 넘기는 페이지 부분 중

...
dispatch(updateSelection({ selectedLocation, selectedKind }));
              navigate('Tabs', {
                screen: 'Stacks',
                // params: { selectedLocation, selectedKind },
              });

값을 받는 페이지 부분 중

import { useSelector, useDispatch } from 'react-redux';

const { selectedLocation, selectedKind } = useSelector(
    (state) => state.selection.selection
  );

기존에 원하는 값을 params로 넘기는 부분을 action.payload를 dispatch 하고 useSelector로 가져오는 방법으로 리팩터링하는 방법을 통해 특정 페이지에서 tabs를 감추고 특정 페이지에서는 tabs를 보이는 부분의 에러 문제를 해결