React-redux 사용법 2/3

React-redux 사용법 2/3

안녕하세요.
TriplexLab 입니다.

오늘은 지난시간에 이어서 이번시간에는 React-redux에 관해서 이야기를 해볼게요.
리액트에서 어떤식으로 파일을 배치하느냐 차이만 있지, 사실상 “리덕스의 내부 구조”는 같다고 생각하시면 됩니다.

그렇기 때문에 이전 글을 한번 보고 오시면 좋을것 같습니다.

자, 다음과 같은 폴더 구조를 만들고 시작합니다.

폴더 구조

👉🏻설정하기

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {Provider} from 'react-redux'
import store from './modules/configStore';

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

// src/modules/configStore.js
import {legacy_createStore as createStore, combineReducers} from "redux"
import cat from "./cat"

const rootReducer = combineReducers({cat}); //하나의 스토어로 만들기 위해 combineReducers안에 객체로 넣습니다.

const store = createStore(rootReducer);

export default store;

// src/modules/cat.js

// action type
const CAHNGE_NAME = "cat/CHANGE_NAME";

const initial_state = {
	name: "펄이 고양이", 
	age: 5
};

// Actions
export const changeName = (name) => ({type: CAHNGE_NAME, name});

//Reducer
export default function reducer(state = initial_state, action = {}){ //위에 Actions에서 리턴한 값이 여기로 들어오게 됩니다.
	switch(action.type){
		case CAHNGE_NAME: {
			return {...state, name: action.name}
		}
		default:
			return state
	}
}

이제 컴포넌트에서 쓸 준비는 다 끝났습니다.

👉🏻컴포넌트에서 데이터 사용하자!

컴포넌트에서 redux-hook사용해서 데이터를 가지고 오는 거 해봅시다.

✅ 2가지 종류

데이터 구독 할때 : useSelector
데이터를 변경 할때 : useDispatch

import { useSelector, useDispatch } from "react-redux";
import { changeName } from "./modules/cat"; //cat.js에서 설정한 Actions함수를 불러와서 사용합니다.

function App() {
  const cat = useSelector(state => state.cat);
  const dispatch = useDispatch();

  const handel = () => {
    dispatch(changeName("고양이 이름!!")) //변경할 데이터값을 인자로 넣습니다.
  }

  return (
    <div className="App">
      <p>name: {cat.name}</p>
      <button onClick={handel}>이름 바꾸기</button>
    </div>
  );
}

export default App;

👉🏻정리

Actions함수를 호출하면(changeName) 인자로 받은 값을 리턴하는데 리턴한 값이 Reducer의 action으로 들어갑니다.

Actions를 사용하는 데이터 흐름

 🙋🏻 전체 코드 공유

아주 간단한 예제 코드 입니다.
리덕스를 처음 접할때 이해도를 돕기위해서 작성한것 입니다.

1) yarn
2) yarn start

react-redux.zip

0.16MB