Reduxtookit 질문 드립니다.

[강병민]

App2.jsx

`

import React, { createContext, useContext, useState } from "react";
import { Navigate, BrowserRouter, Route, Routes } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import setId from "./Store.js";

const App2 = () => {
  const id = useSelector((state) => state.id);
  return (
    <BrowserRouter>
      {id ? (
        <Routes>
          <Route path="/" element={<Hello />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      ) : (
        <Routes>
          <Route path="/register" element={<Form />} />
          <Route path="*" element={<Navigate to="/register" replace />} />
        </Routes>
      )}
    </BrowserRouter>
  );
};

const Form = () => {
  const [inputValue, setInputValue] = React.useState("");
  const dispatch = useDispatch();

  const handleChangeId = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input
        data-testid="id-input"
        type="text"
        name="id"
        value={inputValue}
        onChange={handleChangeId}
      />
      <button type="button" onClick={dispatch(setId(inputValue))}>
        회원가입
      </button>
    </div>
  );
};

const Hello = () => {
  const id = useSelector((state) => state.id);
  const dispatch = useDispatch();

  return (
    <>
      <div>안녕하세요 {id}님!</div>
      <button type="button" onClick={dispatch(setId(""))}>
        로그아웃
      </button>
    </>
  );
};

export default App2;

`

 

 

Store.js

`

import { configureStore, createSlice } from "@reduxjs/toolkit";

const id = createSlice({
  name: "id",
  initialState: "",
  reducers: {
    setId(state, action) {
      return (state = action.payload);
    },
  },
});

export let { setId } = id.actions;

export default configureStore({
  reducer: {
    id: id.reducer,
  },
});

`

 

index.tsx

`

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import App2 from "./App2";
import reportWebVitals from "./reportWebVitals";
import Context from "./Context.jsx";
import Redux from "./Redux.jsx";
import { Provider } from "react-redux";
import store from "./Store";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <Provider store={store}>
    <App2 />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

`

이 코드에서 회원 가입 버튼을 누르면 다음 화면으로 넘어가질 않는데,, 어디가 잘못 작성된 건지 모르겠습니다 ㅠㅠ

[codingapple]

redux state변경함수는 return 오른쪽에 있는 자료로 기존 state를 대체해줍니다 

[글쓴이]

글