ReactJS에서 Redux 설정

npm install react-redux로 redux를 추가해 준다.

 

일단 폴더의 대략적인 구조는 아래 이미지와 같다.

states 폴더에는 state들이 들어있는 폴더이다.

 

reducers에는 state를 사용할 reducer들이 들어있는 폴더이다.

 

state 파일에는 

export const tokenState = {
    token : ""
}

위와 같이 state를 정의한다.

 

reducers 폴더에 들어갈 reducer에는 

import {tokenState} from "../states/tokenState";

enum actionEnum {
    changeToken = "changeToken"
}

const tokenReducer = (state = tokenState, action : { type : any, token : string}) => {

    switch (action.type){
        case actionEnum.changeToken :
            return {
                ...state,
                token : action.token
            }
        default :
            return state
    }
}

export default tokenReducer

위 와같이 state의 값을 어떻게 바꿀지 등을 정의한다.

 

reducer파일에는 reducers에 정의한 내용을 store에 주입하는 내용이 작성되어있다.

import { combineReducers } from 'redux'

import tokenReducer from './reducers/token'


const rootReducer = combineReducers({
    token : tokenReducer
});
export default rootReducer;

 

store파일에는 

import { createStore } from 'redux'
import rootReducer from './reducer'

const store = createStore(rootReducer)

export default store

export type RootState = ReturnType<typeof rootReducer>;

reducer 파일에서 주입받은 reducer들을 이용하여 스토어를 생성해준다.

 

웹펙으로 프로젝트를 생성하였다면 index

vite로 프로젝트를 생성하였다면 main에 아래 내용을 작성해준다.

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

Provider의 store에 생성했던 store를 주입하고 App을 감싸주어 전역으로 reducer를 사용할 수 있도록 한다.

 

실제로 값을 사용하기 위해서는 아래 코드와 같이 useSelector를 이용하여 필요한 값을 호출해서 사용하고 값을 변경하고 싶다면 useDispath를 이용하여 값을 변경하면 된다.

const App = () => {
  const dispatch = useDispatch()
  const {token} = useSelector((state : RootState) => state.token)

  const requestToken = async () =>{
    const currentToken : string = await requestForToken() as string
    dispatch({type:"changeToken", token : currentToken})
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{token}</p>
        <p>
          <button type="button" onClick={() => requestToken()}>
            토큰 호출
          </button>
        </p>
        <p>
          Edit <code>App.tsx</code> and save to test HMR updates.
        </p>
        <p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          {' | '}
          <a
            className="App-link"
            href="https://vitejs.dev/guide/features.html"
            target="_blank"
            rel="noopener noreferrer"
          >
            Vite Docs
          </a>
        </p>
      </header>
    </div>
  )
}

export default App