redux 사용하기

1. redux

slice.js

const initState = {
    사용할 state들 : ~~
}

const aSlice = createSlice({
    name: 'a',
    initState,
    reducers : {
        함수명 : (state, action) => {
            const {함수파라미터들} = action.payload;
            state.사용할 state들 = 변경값
        },
        ...
    }
})

export const {함수명} = aSlice.actions;


export const select사용할state들 = (state) => state.auth.isLogeedIn;

// 실제 사용시에
// const stateA = useSelector(state => state.a.사용할state들)

// export 해줄시에
// const stateA = useSelector(select사용할state들)

export default aSlice.reducer;

store.js

import aSlice from '......./slice';

const store = configureStore({
    reducer: aSlice
})

export default store;

이후 import { Provider } from 'react-redux' 임포트 해준다음
리덕스를 사용할 컴포넌트에 감싸서 사용한다.

<Provider store={store}> ~~~~ </Provider>

• 액션을 디스패치하면
• 리듀서 함수로 가게되고
• 거기서 리턴되는 값이 store 로 보관
• store 값이 변경되면 리렌더링됨