클래스형 컴포넌트에서 리덕스 데이터 사용하기

 

클래스형 컴포넌트에서 리덕스 데이터 사용하기

 

1. 리덕스 모듈과 connect 함수를 불러온다.

// 리덕스 스토어와 연결하기 위해 connect 호출
import {connect} from 'react-redux';
// 리덕스 모듈에서 (bucket 모듈에서) 액션 생성 함수 두개를 가져오기
import {loadBucket, createBucket} from './redux/modules/bucket';

• connect()는 리덕스 스토어와 컴포넌트를 연결한다.
• 사용할 때 'react-redux'에서 import해야 하고 컴포넌트를 export할 때 mapStateToProps, mapDispatchToProps 같은 함수를 매개변수로 컴포넌트와 묶는다.

 

2. 상태값을 가져오는 함수와 액션 생성 함수를 부르는 함수를 만들어준다.

2-1. mapStateToProps()

• 컴포넌트의 props에 스토어의 데이터(=state)를 전달한다.
• [리덕스 스토어 state]는 스토어에서 가져온 reducer의 이름을 넣어주면 된다.

const mapStateToProps = (state) => ({
	
    // [전달 받을 props 이름] : state.[리덕스 state]
    //this.props.bucket_list로 접근 가능.
    bucket_list: state.bucket.list;
});

 

2-2. mapDispatchToProps()

• 컴포넌트의 props에 스토어의 데이터(=state)를 변경할 수 있는 ActionCreator 함수를 전달한다.
• 사용하기 위해서는 리덕스 모듈의 ActionCreator를 import 해야 한다.\

// 액션 생성 함수를 props로 받아오기 위한 함수.
const mapDispatchToProps = (dispatch) => ({
  action1: () => {
    dispatch(actioncreator1)
  },
  action2: () => {
    dispatch(actioncreator2)
  }
});

 

Bucketlist의 App.js에 적용한 모습.

// 리덕스 store에 있는 상태값을 props의 형태로 넣어준다.
// 컴포넌트에 넣어주는 역할이다.
const mapStateToProps = (state) => ({
bucket_list : state.bucket.list
});

// 디스패치 역할.
// 값을 변화시키기 위한 액션 생성 함수를 props로 받아오기 위한 함수.
const mapDispatchToProps = (dispatch) => {
  return{
    load: () => {
      dispatch(loadBucket());
    },
    create: (new_item) => {
      dispatch(createBucket(new_item));
    }
  }
};

 

3. connect로 컴포넌트와 스토어를 엮어준다.

// withRouter 적용
// connect 사용
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(App));

 

4. 콘솔에 this.props를 찍어본다.

- store 값이 잘 나오는지 확인

  componentDidMount() {
    console.log(this.props);
  }

 

5. this.state에 있는 list를 지우고 스토어에 있는 값으로 바꿔준다.

    this.state = {
      //list: ["영화관 가기", "매일 책읽기", "수영 배우기"], 삭제
    };

render={(props) => <BucketList list={this.state.list} history={this.props.history}/>}
// 아래의 코드로 변경 
render={(props) => <BucketList list={this.props.bucket_list} history={this.props.history}/>}

 

6. setState를 this.props.create로 바꾼다.

  addBucketList = () => {
    const new_item = this.text.current.value;
    this.setState({ list: [...list, new_item] });
  };
  // 아래의 코드로 변경
    addBucketList = () => {
    const new_item = this.text.current.value;
    this.props.create(this.text.current.value);
  };