리액트 리덕스 셋팅(툴킷x)정리
이번에 redux-toolkit이 나오면서 이전에 셋팅하던 리덕스를 정리하고자 글을남김.
step 1. 리덕스 설치
npm add redux react-redux
step 2. 리듀서 생성후 리듀서 리턴
mkdir ./reducer/user.js
mkdir ./reducer/post.js
user.js(post.js동일)
const initialState: UserState = { // 초기 데이터
isLoggingIn: false,
data: null,
};
const userReducer = (prevState = initialState, action) => { // 리듀서 생성
switch (action.type) {
}
});
export default userReducer;
step 3. 루트 리듀서 셋팅
스토어에 리듀서를 등록하는데 리듀서는 한 개만 등록할 수 있음. 루트 리듀서에 등록한 리듀서를 한 개의 객체로 감싸서 스토어에 등록.
mkdir ./reducer/index.js // 폴더와 기본파일 생성
import { combineReducers } from 'redux';
import userReducer from './user'; // user 리듀서
import postReducer from './post'; // post 리듀서
const reducer = combineReducers({ // 리듀서 통합
user: userReducer,
posts: postReducer,
});
export default reducer;
step 4. 액션파일, 리듀서 스토어 등록
액션 및 액션생성함수 파일별도 생성, 스토어 등록
1. 액션정의
mkdir ./actions/user.js
export const LOG_IN_REQUEST = 'LOG_IN_REQUEST'; // 각 액션
export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS';
export const LOG_IN_FAILURE = 'LOG_IN_FAILURE';
export const logInRequest = (data) => { // 액션 생성함수
return {
type: LOG_IN_REQUEST,
data,
}
};
export const logInSuccess = (data) => {
return {
type: LOG_IN_SUCCESS,
data,
}
};
export const logInFailure = (error) => {
return {
type: LOG_IN_FAILURE,
error,
}
};
액션생성 함수는 변경될 state가 동적이거나 사용자가 입력한 값으로 액션을 취할때 필요.
2. store
import { createStore, compose, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './reducers';
const enhancer = process.env.NODE_ENV === 'production'
? compose(
applyMiddleware(
// 미들웨어
),
)
: composeWithDevTools( // 개발모드일때 상태추적
applyMiddleware(
// 미들웨어
),
);
const store = createStore(reducer, initialState, enhancer); // 스토어 생성
export default store;
step 5. 스토어 등록
app.js
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector('#root'),
);
Author And Source
이 문제에 관하여(리액트 리덕스 셋팅(툴킷x)정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yahoo2344/리액트-리덕스-셋팅툴킷x정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)