출처: https://academy.nomadcoders.co/courses/enrolled/235420

Nomade coder redux 강의

(React Redux : To Do List 만들기)

3. React Redux

해줘야 할 일

  1. Home.js 에서 <ul>태그에 가져다 붙일 todo 를 getState() 를 해야한다.
  2. getState() 하면 데이터는 어디서 오냐? > store.js
  3. connect 해주려면,

Provider

Provider는 어렵게 생각할거 없이 단순한 하나의 컴포넌트이다. react로 작성된 컴포넌트들을 Provider안에 넣으면 하위 컴포넌트들이 Provider를 통해 redux store에 접근이 가능해진다. Ex) Provider를 이용해 redux store에 연결하기

index.js

    import React from "react";
    import reactDom from "react-dom";
    import App from "./component/App";
    import { Provider } from "react-redux";
    import store from "./routes/store";

    reactDom.render(
        // React의 props처럼 redux로 만든 store를 Provider에적용한다.
        <Provider store={store}>
            <App />
        </Provider>,
        // 이제 App 컴포넌트는 Store에 접근이 가능하다.
        document.getElementById("root")
    );

pure redux 에서 사용했던 방법:

state를 store로 보내기 > dispatch() store 에서 state 가져오기 > getState()

react-redux 에서 하기 위해선 :

state를 store로 보내기 > dispatch() > mapDispatchToProps() store 에서 state 가져오기 > getState() > mapStateToProps() 그리고, connect()() 로 연결!

connect()()

connect함수는 Provider 컴포넌트 하위에 존재하는 컴포넌트들이 Store에 접근하게 만드는 역할을 해준다. connect(getState함수,dispatch함수)(보낼곳) 함수의 행위를 한 뒤 store의 상태를 가져다가 (보낼곳)으로 전달

mapStateToProps()

mapStateToProps는 connect함수에 첫번째 인수로 들어가는 함수 혹은 객체다. mapStateToProps는 기본적으로 store가 업데이트가 될때 마다 자동적으로 호출이 된다.이를 원하지 않는다면 null 혹은 undefined값을 제공해야한다.

mapDispatchToProps()

mapDispatchToProps는 connect함수의 두번째 인자로 사용된다. 이것은 기본적으로 store에 접근한 컴포넌트가 store의 상태를 바꾸기 위해 dispatch를 사용할수 있게 만들어준다.

ex)

function mapStateToProps(state){
    return {toDos: state};  // 여기서 return하는 값은, props 형태로 전달된다
}

function mapDispatchToProps(dispatch){
    return {
        addToDo: text => dispatch(actionCreators.addToDo(text))
        // 새로 dispatch 할 함수를 생성하지 않고, store.js에 있는 것을 가져와서 씀
    };
}

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

Action Creator(액션 생성자)

Action Creator는 단지 Action을 만들기 위한 함수다.

    const addToDo = function(text){
        return {
            type: ADD_TODO,
            text
        };
    };

    const deleteToDo = function(id){
        return {
            type: DELETE_TODO,
            id
        };
    };
    export const actionCreators = {
        addToDo,
        deleteToDo
    };

완성 코드: https://github.com/dev-csa/vanilla_redux.git