redux vs mobx 강의를 듣던 중
index2.js를 다음과 같이 작성하고 명령어 node index2를 실행하였더니
Cannot access 'store' before initialization, 라는 에러가 나와서,
store 선언부 즉, const store = createStore~~~ 부분을 initialState 바로 밑으로 옮기면
다시 Cannot access 'enhancer' before initialization, 라는 에러가 뜨고
이로 인해서 enhancer를 다시 최상단으로 올리면
Cannot access 'firstMiddleware' before initialization라는 에러가,
firstMiddleware를 최상단으로 올리면 처음의 Cannot access 'store' before initialization
가 뜨는 악순환이 반복되고 있는데, 도대체 무엇이 잘 못된것 일까요?ㅠㅠ
아무리 강의를 다시 봐도 제로초님과 같은 순서로 작성한 것 같은데요..
const { createStore, applyMiddleware } = require("redux");
const reducer = require("./reducers");
const { logIn, logOut } = require("./actions/user");
const { addPost } = require("./actions/post");
const initialState = {
user: {
isLoggingIn : true,
data: null,
},
posts: [],
};
const firstMiddleware = (store) = (dispatch) = (action) => {
console.log("액션로깅", action);
dispatch(action);
};
const thunkMiddleware = (store) = (dispatch) = (action) => {
if (typeof action === "function"){ // 비동기 (비동기인 경우 액션을 함수로 넣겠다!)
return action(store.dispatch, store.getState);
}
return dispatch(action);
};
const enhancer = applyMiddleware(
firstMiddleware,
thunkMiddleware,
);
const store = createStore(reducer, initialState, enhancer);
console.log("1st", store.getState());
// 하단의 코드들은 react component에서 작성 및 실행되어야 하는 코드.
store.dispatch(logIn({ id: 1, name: "eunsonny", admin: true }));
console.log("2nd", store.getState());
// store.dispatch(addPost({ userId: 1, id: 1, content: "첫번째 안녕하세요."}));
// console.log("3rd", store.getState());
// store.dispatch(addPost({ userId: 1, id: 2, content: "두번째 안녕하세요."}));
// console.log("4th", store.getState());
// store.dispatch(logOut());
// console.log("5th", store.getState());