React-Redux_기초6 객체를 Redux store에 저장하기
지금까지는 react-redux store에 숫자로만 조작을 하였지만 이번에는 데이터, 즉 객체 데이터를 넣도록 하겠습니다.
먼저 저번과 마찬가지로 Action, Reducer, Types 3개를 resume 폴더안에 말들어줍니다.
export const ADD_RESUME = "ADD_RESUME"; // 이력서를 지원하기 위한 타입 입력
먼저 resumeTypes.js에 위 코드를 작성해 줍니다.
import { ADD_RESUME } from './resumeTypes';
export const addResume = (resume = {Name : '', Email : ''}) => {
return {
type : ADD_RESUME,
payload : resume
}
}
이제 액션부분을 resumeAction.js부분에 코딩을 해줍니다. 여기서 cookie파트와 비슷하면서 다른점이 있습니다. 인자를 받지만 이번에는 객채를 받습니다. 키값이 Name, Email로 구성된 객체를 받습니다. 이것은 payload에 전달되서 reducer에 보내기게 됩니다.
// resumeTypes에서 이력서 지원 타입을 받아온다.
import { ADD_RESUME } from './resumeTypes';
// 지원자의 이름과 이메일을 state로 저장한다
const initialState = {
resume : {
Name : '',
Email : ''
} // 초기 이력서는 빈공간
};
// cookieReducer는 이전 toyReducer와 달리 payload에 따라 수량이 변화한다.
const resumeReducer = (state = initialState, action) => {
switch(action.type){
case ADD_RESUME: // 이력서를 지원하는 액션이다.
return {
...state,
resume : action.payload // 이력서는 덮어씌운다
}
default : return state // 해당 타입이 아니면 그대로 state를 return 한다.
}
}
export default resumeReducer;
resumeReducer.js의 부분을 위와같이 코딩합니다. 이렇게 하면 사실상 resume폴더 부분은 마무리를 하게 됩니다. 중요한 사실은 case ADD_RESUME부분에서 resume에 들어가는 값은 객체 {Name : [지원자 이름], Email: [이메일]}가 들어갑니다.
export { buyToy, sellToy } from './toy/toyAction';
export { buyCookie, sellCookie } from './cookie/cookieAction';
export { addResume } from './resume/resumeAction';
이제 index.js파일에 addResume를 추가하고 export해 줍니다.
import toyReducer from './toy/toyReducer';
import cookieReducer from './cookie/cookieReducer';
import resumeReducer from './resume/resumeReducer';
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
toyReducer,
cookieReducer,
resumeReducer
})
console.log("rootReducer : ", rootReducer);
export default rootReducer;
이제 rootReducer.js부분에 들어가셔서 코딩을 해줍니다. combineReducers부분에서 resumeReducer를 추가해 주고 저장을 합니다.
이제 components폴더에 들어가서 RedumePart.js을 생성해 줍니다.
import {React, useState} from 'react';
import { connect } from 'react-redux'; // react, redux연결
import { addResume } from '../Redux'; // resume action 연결
// 위 함수는 App.js에 추가할 component
function ResumePart(props){
// resumeName,resumeEamil를 각각 저장
const[resumeName, setResumeName] = useState('');
const[resumeEamil, setResumeEmail] = useState('');
// return할 component
return (
<div>
<h2>Resume</h2>
<div>
<label>Name</label>
<input type = 'text'
value = {resumeName}
onChange = {e => setResumeName(e.target.value)} />
</div>
<div>
<label>email</label>
<input type = 'text'
value = {resumeEamil}
onChange = {e => setResumeEmail(e.target.value)} />
</div>
<div>
<button
onClick = {
() => {
// addResume액션에 지원자
// Name과 Email을 넣는다.
props.addResume({
Name : resumeName,
Email : resumeEamil
})
setResumeName(""); // Name 초기화
setResumeEmail(""); // Email 초기화
}}>Submit</button>
</div>
<div>
<p>{`이름 : ${props.resume.Name}`}</p>
<p>{`Email : ${props.resume.Email}`}</p>
</div>
</div>
)
}
// Redux실행시 현재 state에 저장된 기록을 불러옵니다.
const mapStateToProps = (state) => {
console.log('mapStateToProps : ', state);
return {
resume : state.resumeReducer.resume
}
}
// Redux실행시 각 action에 따른 method를 Arrow function에따라 dispatch합니다.
const mapDispatchToProps = (dispatch) => {
return {
// resume는 resumeName, resumeEmail 를 객체로 받아온다.
addResume : (resume) => {
dispatch(addResume(resume));
}
}
}
// 각파트를 connect를 이용하여 React와 Redux를 연결합니다.
export default connect(
mapStateToProps,
mapDispatchToProps
)(ResumePart);
// export default ResumePart;
위 코드처럼 ResumePart.js을 작성합니다. 내용은 주석들을 참고해 주시기 바랍니다.
import { Provider } from 'react-redux'; // store를 App.js전체에 사용하기 위해 필요
import store from './Redux/store'; // 실제 Redux의 store
// components part
import ToyPart from './components/ToyPart';
import CookiePart from './components/CookiePart';
import ResumePart from './components/ResumePart';
function App() {
return (
<Provider store = {store}>
<div className = "App">
<ToyPart />
<CookiePart />
<ResumePart />
</div>
</Provider>
);
}
export default App;
이제 App.js으로 넘어갑니다. 여기서 <ResumePart />부분을 추가해 줍니다. 이제 npm start를 하여 앱의 동작상태를 확인해보겠습니다.
이전글 : React-Redux_기초5 새로운 component생성하고 React실행
댓글
댓글 쓰기