리덕스 store 생성하기

리덕스의 요소

1. 스토어(Store): 애플리케이션의 상태를 보유하고 관리하는 객체입니다. 상태는 단일 객체 트리로 표현되며, Redux 스토어에서 관리됩니다.

2. 액션(Actions): 애플리케이션에서 스토어로 데이터를 보내는 방법입니다. 액션은 일종의 이벤트 객체로, 애플리케이션에서 상태 변경을 일으킬 때마다 발생합니다.

3. 리듀서(Reducers): 액션에 응답하여 상태를 어떻게 변경할지 정의합니다. 리듀서는 순수한 함수로, 이전 상태와 액션을 받아서 새로운 상태를 반환합니다.

4. payload: 액션 객체의 속성 중 하나로, 액션과 함께 전달되는 데이터를 포함하는 속성입니다

const { createSlice } = require("@reduxjs/toolkit");

const initialState = 
      // 로컬 스토리지에 user로 getItem을 하는데 정보가 존재한다면?
      localStorage.getItem('user') ?
      // Json 형태의 user를 parse하여 아이템을 가져온다
  JSON.parse(localStorage.getItem('user')) : 
	// 존재하지 않을 경우 ""로 초기화 해 준다
{ email: "", token: "", id: "" }

// userSlice라는 이름으로 createSlice를 생성하여 이름을 user로 생성한다
export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    // reducers로 state와 action을 매개변수로 받음
  setUsers: (state, action) => { 
    // 상태의 email 필드를 액션의 payload에 있는 email 값으로 설정
  state.email = action.payload.email;
    // 상태의 token 필드를 액션의 payload에 있는 token 값으로 설정
  state.token = action.payload.token; 
     // 상태의 id 필드를 액션의 payload에 있는 id 값으로 설정
  state.id = action.payload.id;
}


      localStorage.setItem('user', JSON.stringify(state));
    },
    removeUser: (state) => {
      state.email = "";
      state.token = "";
      state.id = "";

      localStorage.setItem('user', JSON.stringify(state));

    }
  }
})

export const {setUser, removeUser} = userSlice.action;

export default userSlice.reducer;

user를 처리할 user.slice.js를 생성한 후, userSlice를 만들어 준다

export const store = configureStore({
  reducer: {
    userSlice
  }
})

store의 index.js에 configureStore를 이용해 store를 생성해 준다

ReactDOM.createRoot(document.getElementById('root')).render(
    <Provider store={store}>
    <App />
    </Provider>,
)

main.js에 Provider를 생성하여 store를 넣어 준다

Signin.jsx

  const dispatch = useDispatch();

...

signInWithEmailAndPassword(auth, email, passsword)
    .then(userCredential => {
      navigate('/')
      dispatch(setUser({
        email: userCredential.user.eamil,
        token: userCredential.user.refreshToken,
        id: userCredential.user.uid
      }))
    })
    .catch(error => {
      return error && setFirebaseError("이메일 또는 비밀번호가 잘못 입력되었습니다")
    })
  }

Dispatch를 생성해 준 뒤
signIn 시 dispatch를 사용하여 user 정보를 setUser로 email, token, id를 넣어 준다

Signup.jsx

똑같이 hadleSingupAndLogin 로직에 Dispatch를 추가해 준다

const handleSignupAndLogin = (email, password) => {
    createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // 리덕스 스토어에 담는 로직
      dispatch(setUser({
        email: userCredential.user.eamil,
        token: userCredential.user.refreshToken,
        id: userCredential.user.uid
      }))

      navigate('/')
    })