React Redux 사용하기

 

npm i redux react-redux redux-saga redux-devtools-extension

---

reducer를 만들어준다.

todolist를 만들 것이므로 todo reducer를 만들어준다.

 

src/reducer/todo.js

const initialState = [
  { id: 1, data: "리액트 공부하기" },
  { id: 2, data: "밥 먹기" },
];

export const ADD_LIST = "ADD_LIST";
export const REMOVE_LIST = "REMOVE_LIST";

const Todo = (state = initialState, action) => {
  switch (action.type) {
    case ADD_LIST:
      return [...state, { id: action.data.id, data: action.data.data }];
    case REMOVE_LIST:
      return state.filter((v) => v.id !== action.id);

    default:
      return state;
  }
};
export default Todo;

---

rootReducer에 사용할 reducer를 넣어준다

 

src/reducer/index.js

import { combineReducers } from "redux";
import todo from "./todo";

const rootReducer = combineReducers({
  todo,
});

export default rootReducer;

---

src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
//리덕스 설정
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./reducer";
//-------------------------------------------------------
//dev-tools 미들웨어 적용
import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(rootReducer, composeWithDevTools());

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

이렇게 하면 리덕스 사용 준비 완료

---

이제 리덕스를 사용해보자

 

src/components/todoForm.js

import useInput from "../hooks/useInput";
import { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { ADD_LIST } from "../reducer/todo";

const TodoForm = () => {
  const [text, onChangeText, setText] = useInput();
  const dispatch = useDispatch();
  const state = useSelector((state) => state.todo);

  const onAddList = useCallback(() => {
    dispatch({
      type: ADD_LIST,
      data: {
        id: state[state.length - 1].id + 1,
        data: text,
      },
    });
    setText("");
  }, [state, text, dispatch, setText]);


  return (
    <div>
      <input
        placeholder="할 일을 입력하시오"
        type="text"
        value={text}
        onChange={onChangeText}
      />
      <button onClick={onAddList}>추가</button>
      <button onClick={onResetList}>초기화</button>
    </div>
  );
};

export default TodoForm;

useSelector를 통해서 todo.js의 initialState 데이터를 불러오고

usedispatch를 통해서 todo.js 안에 있는 action 중에서 사용할 action을 type에 적어주면 된다