Redux

• store : data를 저장
• reducer : data를 수정
  -> reducer가 return하는 것은 application의 state가 된다.

const reducer = () => {}

const store = createStore(reducer)

• getState : state를 얻을 수 있다. (store.getState())
• subscribe : store안에 있는 data의 변화들을 알 수 있게 해준다.
  (store.subscribe(home))
  home컴포넌트가 store의 변화가 일어날때 실행됨

countStore.subscribe(onChange);

const onChage = () => {
	number.innerText = countStore.getState()
    ```
}

• action을 return하는 함수는 reduce위에 위치한다.

컴포넌트와 store을 연결하려면?

index.js에서 Provider을 불러온 뒤 store과 연결

import { Provider } from "react-redux";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

store로부터 state를 가져오는 방법은?

1. getState()
2. connect

connect

• components들을 store에 연결
• connect는 react-redux로부터 온 것
• 아래와 같이 2개의 arguments를 가진다

1. state = mapStateToProps,
2. dispatch = mapDispatchToProps

• 첫번째 인자인 state는 필요하지 않고 2번째 인자인 dispatch만 필요한 경우 아래와 같이 작성

export default connect(null, mapDispatchToProps)(Home)

1.mapStateToProps

function Home(){} // Home컴포넌트

//아래에서 사용

function mapStateToProps(state){
	return {toDos: state} 
    //Home컴포넌트의 props로 store에서 가져온 state를 
    toDos의 key값으로 추가해준다.
}

export default connect(mapStateToProps)(Home);

• 항상 객체를 return시켜야 한다.
• 2개의 arguments를 가진다 (state, props)
  • state는 store로 부터 가져온 state고
  • props는 Home 컴포넌트에 props이다.

2.mapDispatchToProps

• 항상 객체를 return시켜야 한다.
• 2개의 arguments를 가진다 (dispatch, props)
  • dispatch를 return시키면 connect된 컴포넌트에서 dispatch를 사용할 수 있다.
  • props는 connect된 컴포넌트에 props이다.

dispatch를 하는 두가지 방법

함수 내에서 직접 dispatch를 하는 방법

function Home({dispatch}){

	function onSubmit(e) {
    dispatch(addToDo(text));
  }

} 

function mapDispatchToProps(dispatch){
	return {dispatch}
	//이제 Home컴포넌트에서 dispatch를 사용할 수 있다
}

export default connect(null, mapDispatchToProps)(Home);

참고로 addToDo는 store에서 불러온 함수

export const addToDo = (text) => {
  return {
    type: ADD,
    text,
  };
};

dispatch를 mapDispatchToProps내에서 하며 dispatch를 하는 함수를 제공해준다. 해서 Home컴포넌트에서 props로 dispatch를 하는 함수를 전달해줘서 그 함수를 이용해 dispatch한다.

function Home({addToDo}){

	function onSubmit(e) {
     addToDo(text);
  }

} 

function mapDispatchToProps(dispatch){
	 return {
    addToDo: (text) => dispatch(actionCreators.addToDo(text)),
  };
}

export default connect(null, mapDispatchToProps)(Home);

hooks방법

위와 같은 방법은 불편하기 때문에 hooks의 useSelector, useDispatch 방법이 더욱 간편하다.

[js] 값이 없을 때 오류가 안나는 방법은?

• Optional chaining
• props앞에 ?를 넣어준다.
  참고

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

const Detail = ({ todos }) => {
  return (
    <>
      <h1>{todos?.text}</h1>
      <h3>{todos?.id}</h3>
    </>
  );
};

참고 : 노마드코더 redux 강의