React에서 redux 사용해보기

toolkit x

0. 리덕스 설치

// npm
npm install react-redux
// yarn
yarn add redux react-redux

- src - redux 폴더 생성
- `redux` 폴더 안에 `config`, `modules` 폴더를 생성 - 생성할 state들의 그룹
- `config` 폴더 안에 `configStore.js`파일을 생성 - 중앙 관리소인 Store를 만드는 설정 코드들이 있는 파일
- modules 폴더 안 store.js(store는 사이트 목적에 맞게)

 

1. 스토어 생성

// src/configStore.js

import {createStore, combineReducers} from "redux";
import todo from "./modules/todo" // 모듈에 있는 reducer 불러오기

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store;

 

2. 스토어 연동

// 디렉토리 최상단 파일 ex/ index.js

import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어준다.
  <Provider store={store}>
    <App />
  </Provider>
);
reportWebVitals();

 

3. reducer 편집

// 예제
// todo.js - ./modules에 있는 파일

// Actions
const CREATE = 'my-app/todo/CREATE';
const REMOVE = 'my-app/todo/REMOVE';

// Reducer
//action이 없으면 state는 아래 initialState의 초기값, 있으면 action 값
export default function reducer(state = initialState, action = {}) {
    switch (action.type) {
    // do reducer stuff
    
    case CREATE:{
        const new_todo_list = [...state.todos, action.todo];
        return {todos: new_todo_list};

    }
    case REMOVE:{
        const new_todo_list = action.todo
        return {todos: new_todo_list}
    }   
    
    default: 
        return state;
    }
}

// Action Creators
export function createTodo(todo){
  console.log("create 액션을 생성할거양")
    return {type: CREATE, todo}
}

const initialState = { // createTodo(todo)의 초기값 설정
        todos : [
          {
            id: 1,
            name: '냠냠',

          },
          {
            id: 2,
            name: '뇽뇽',
          }
      ]
}

export function removeTodo(todo){
  console.log("remove 액션을 생성할거양")
    return {type: REMOVE, todo}
}
// 미들웨어 부분
// side effects, only as applicable
// e.g. thunks, epics, etc
// export function getWidget () {
// return dispatch => get('/todo').then(todo => dispatch(updateWidget(todo)))
// }

 

 

3번의 reducer 편집까지 완료됐다면 이제 컴포넌트에서 사용 가능하다.

// 리덕스 훅
import {useSelector , useDispatch} from "react-redux";


const test = () =>{
	// 해당 상수는 useSelector를 통해 reducer에 있는 state 값을 가져온다.
	const testList = useSelector((state=>state.todo.todos))
    // 액션을 생성하기 위해 준비
    const dispatch = useDispatch()
    
    const addBtn = () =>{
    	---실행하고싶은 코드들---
        -------------------------
        // dispatch로 액션을 생성했으니, 원하는 처리는 reducer에서 입력하면 된다.
        dispatch(createTodo(reducer에서 처리하고 싶은 값))
    }
    return(
    	<div></div>
    )
}

 

 

 

 

 

---

참조

https://ko.redux.js.org/

Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux

https://velog.io/@scw0604/Redux