React-Redux(2)

모듈 작성하기

1.액션 타입 정의

modules 디렉터리 생성 폴더내부에 '모듈이름'.js 파일 생성

경로: modules/모듈이름.js

const 액션이름 = '모듈이름/액션이름'

문자열 내용은 '모듈 이름 / 액션 이름' 식으로 작성
문자열 안에 모듈이름을 넣어 액션이름 충돌 방지

2.액션 생성 함수 만들기

export const 액션함수이름 = ()=>({type:타입이름});
export const 액션함수이름2 = ()=>({type:타입이름2});

export 키워드사용으로 다른 파일에서 사용가능하도록 생성
사실상 dispatch 와 같은 역할(?) dispatch가 호출되면 reducer가 호출됨 reducer는 action 값으로 dispatch 내용을 받음

3.초기상태 및 리듀서 함수 만들기

const 초기값 = {
  number: 0,
};

function 리듀서(state = 초기값, 액션함수) {
  switch (액션함수이름.type) {
    case 타입이름:
      return {
        number: state.number + 1,
      };
    case 타입이름2:
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
}

export default 리듀서;

4.루트 리듀서 만들기(모듈이 많을때)

createStore 함수를 사용할때는 리듀서를 하나만 사용해야함,
1~3과정으로 리듀서가 여러개 일 경우 리덕스에서 제공하는
combineReducers 유틸함수를 사용하여 처리

modules 폴더에 index.js 파일 생성

경로: modules/index.js

import { combineReducers } from 'redux';
import 모듈이름 from './모듈경로';
import 모듈이름2 from './모듈경로2';
import 모듈이름3 from './모듈경로3';


const rootReducer = combineReducers({
  모듈이름,
  모듈이름2,
  모듈이름3,
});

export default rootReducer;

5.스토어 만들기

src/index.js 파일로 이동

import React from 'react';
import ReactDOM from 'react-dom';

import { createStore } from 'redux'; //(createStore 연결)
import { Provider } from 'react-redux'; //(provider연결)
import rootReducer from './modules/index'; //(루트리듀서 연결)

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const store = createStore(rootReducer);

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

reportWebVitals();

createStore, Provider, rootReducer 연결
createStore를 rootReducer인자로받아 호출하고

const store = createStore(rootReducer);

Provider로 App 컴포넌트를 감싸주면서 props로 store 전달

<Provider store={store}>
      <App />
</Provider>