Redux 셋팅

설치

yarn add redux react-redux

프로젝트 구조 설정하기

• App.jsx
• src/redux/config/configStore.js
• src/redux/modules

 

src/redux 폴더 : redux관련 코드를 모두 몰아넣음
src/redux/config폴더 : 리덕스 설정 관련 파일 전부
src/redux/config/configStore.js파일 : 중앙 state 관리소 -> 설정 코드(.js)
src/redux/modules폴더 : state의 그룹! Todolist의 경우 todos.js 

 

(src/redux/config/configStore.js) 파일 작성해주기

1. createStore()
   리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수). 리덕스는 단일 스토어로 모든 상태 트리를 관리함. 리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없다
2. combineReducers()
   리덕스는 action —> dispatch —> reducer 순으로 동작. 이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생하는데, combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어 줌

// 중앙 데이터 관리소(store)를 설정하는 부분
import { createStore } from 'redux'; // store를 만드는 API
import { combineReducers } from 'redux'; // reducer들을 하나로 묶는 역할을 하는 API

// 인자로 객체 형태
const rootReducer = combineReducers({});

// reducer의 묶음들이 인자로 들어가야 함. 즉, rootReducer
const store = createStore(rootReducer);

// store를 사용해서 application에 주입하는 단계가 필요
export default store;

(index.js) 파일 수정해주기

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    // <React.StrictMode>

    // 하부에서 store 쓸 수 있음. import필요
    <Provider store={store}>
        <App />
    </Provider>
    // </React.StrictMode>
);