ReduxSimpleStater 복습

복습

파일 구조

백엔드를 담당해줄 api

http://reduxblog.herokuapp.com

딱보면 어떻게 진행되는지 알수 있는 간단한 구성이다.
Post 리스트를 얻거나 Post 추가,삭제,조회 가 가능한 api이다.

설계

설계라고 해서 머리아플것 같은 생각이 들지만 다행히 강의를 진행했던 강사님의 프로젝트가 있다. 해당 프로젝트를 보며 설명하겠다.

파일 경로	설명
actions/index.js	액션생성자
components/posts_index.js	PostList
components/posts_new.js	Create Post
components/posts_show.js	Post Detail
reducers/index.js	mapping
reducers/reducer_posts.js	액션 처리 Reducer

무언가 많았던거 같은건 기분탓일까? 비교적 간단한 구조이다.

---

사용된 라이브러리,프로그램

• axios
• redux
• react-redux
• react-router-dom
• redux-promise
• postman

Error

bundle.js:21414 Uncaught Error: Reducer "posts" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.

state = {} 빈객체 잘 넣어놓고 default : return state를 해주지 않아 기본값이 없다는 에러가 발생

Invariant failed: You should not use Link outside a Router

Router 를 사용하지 않고 안에 Link를 지정하게 된다면 생기는 오류

axios로 비동기 통신을 할경우 Promise 객체를 반환으로 인한 오류

실제 작동은 아래처럼 일어난다.

이러한것을 관리해주는 redux-promise 라이브러리가 존재한다 promise 객체가 완료된뒤 반환하기에 그 사이 과정을 신경쓸 필요가 없어진다.

Failed prop type: The prop form is marked as required in Form(PostsNew), but its value is undefined.

redux-form은 form: "form name"을 지정해주지 않으면 오류발생