Redux

드디어 리덕스 공부하는데...
처음들었을 때 진짜 이해 1도 안감 ㅠㅠ 또르르르륵
그래서 다시 강의 들어보고 일단 쓰는 코드를
여기에 적어봐야겠다..나중에 글 다시 보면 복습이라도 되겠지...?

일단 action 폴더에 index.js이렇게 파일 만들어주고
action creators에 관한 코드를 여기에 적어준다

export const selectSong = (song) => {
  return {
    type: "SONG_SELECTED",
    payload: song,
  };
};

여기서 select song이라는 action을 만들어준거다.
그리고 평소에 다른 컴포넌트는 export default로 export를 해줬는데
이렇게 하면 function하나만 export 되는거다
근데 하나의 파일에 여러 function들을 export 해주려고 할때는
named export라고 저렇게 함수 앞에 export라고 적으면 된다.
이걸 다른 컴포넌트에서 import해줄때는 { } 여기 안에 적어준다.
export default때는 { } 이거 없이 써도 되지만 named export는 { }안에!

reducer 폴더에 있는 index.js에는

const selectedSongReducer = (selectedSong = null, action) => {
  if (action.type === "SONG_SELECTED") {
    return action.payload;
  }
  return selectedSong;
};

export default combineReducers({
  songs: songsReducer,
  selectedSong: selectedSongReducer,
});

저렇게 arguments 2개로 설정해줌.
다른 유투브 강의도 봤는데 두번째 argument에는 항상 action넣어주는듯.
그리고 지금 이렇게 reducers이 두개 있는걸 combine해주기 위해
맨 위에

import { combineReducers } from "redux";

을 넣어준다... 그리고 위의 코드처럼 combineReducers 함수를
만들어줌....

그리고 또 해줘야할건 provider 태그로 app을 감싸주는거다.
index.js 맨 위에

import { Provider } from "react-redux";
import { createStore } from "redux";

써주고 reducer도 import해와야 하니까

import reducers from "./reducers"; 이것도 써줌

그리고

ReactDOM.render(
  <Provider store={createStore(reducers)}>
    <App />
  </Provider>,
  document.querySelector("#root")
);

이렇게 provider태그로 감싸줌...저렇게 props도 써주는데
솔직히 저 부분은 이해 안가서 일단 질문했다.... ㅠ
답변 보면 이해할 수 있기를....

아무튼 이 provider과 연결해주기 위해 connect component도 만들어줘야함... connect는 내 코드에서 SongList하고 연결해주는거니까
SongList.js 에

import React, { Component } from "react";
import { connect } from "react-redux";

class SongList extends Component {
  render() {
    return <div>SongList</div>;
  }
}

const mapStateToProps = (state) => {
  return { songs: state.songs };
};

export default connect(mapStateToProps)(SongList);

mapStateToProps 이라는 function이 redux에 있는 모든 state를
call 하는것.. 그래서 connect 첫번째 argument에 이걸 넣어줌.

const mapStateToProps = (state) => {
  return { songs: state.songs };
};

여기에서 songs: state.songs 얘가 SongList의 props이 된다고 함.
후.......너무 어려운데???????
리덕스 어떻게 공부할지 감이 안잡힌다 ㅠㅠ
일단 강의 쭉 듣고 난 뒤에 다시 복습하는식으로 듣고
또 유투브에서도 관련된 강의들을 찾아서 들어봐야겠다.
오늘도 유투브에서 리덕스 기초? 들었는데 나름 이해는 되었는데
혼자 구현하는건 뭔가 무리일듯한 이 느낌 ???