jeffdev
2k
2019-06-09 15:25:15 작성 2019-06-09 15:27:43 수정됨
5
516

리덕스 액션에서 리턴데이터 컴포넌트로 넘겨주는 방법 질문이요!


현재 대충 이것저것 끼워서 구현중인데요~

현재 productAction.js에는


export const list_dealBoard = () => dispatch => {
  return axios.get(`http://localhost:8080/dealboard/list`)
   .then(res =>
      dispatch({
        type: LIST_DEALBOARD,
        payload: res.data
      })
    ).then(payload=>{
      console.log(payload);
      return payload;
    })

이거 콘솔 내용은

  1. {type: "LIST_DEALBOARD", payload: Array(9)}
    1. payloadArray(9)
      1. 0{createdAtnullupdatedAtnulldealbrdno1brdtitle"TestTitle"brdwriter"TestWriter", …}
      2. 1{createdAtnullupdatedAtnulldealbrdno2brdtitle"TestTitle"brdwriter"TestWriter", …}
      3. 2{createdAtnullupdatedAtnulldealbrdno3brdtitle"TestTitle"brdwriter"TestWriter", …}
      4. 3{createdAtnullupdatedAtnulldealbrdno4brdtitle"TestTitle"brdwriter"TestWriter", …}
      5. 4{createdAtnullupdatedAtnulldealbrdno5brdtitle"TestTitle"brdwriter"TestWriter", …}
      6. 5{createdAtnullupdatedAtnulldealbrdno6brdtitle"TestTitle"brdwriter"TestWriter", …}
      7. 6{createdAtnullupdatedAtnulldealbrdno7brdtitle"TestTitle"brdwriter"TestWriter", …}
      8. 7{createdAtnullupdatedAtnulldealbrdno8brdtitle"TestTitle"brdwriter"TestWriter", …}
      9. 8{createdAtnullupdatedAtnulldealbrdno9brdtitle"TestTitle"brdwriter"TestWriter", …}
      10. length9
      11. __proto__Array(0)

      12. type"LIST_DEALBOARD"
    2. 이런식으로 데이터 잘불러옵니다 하지만..

import React,{ Component }  from 'react';
import './productlist.css';
import { connect } from 'react-redux';
import { list_dealBoard } from '../../action/productActions';

class productlist extends Component{
constructor(props){
      super(props);
    console.log(this.props.product.productlist); 
    console.log(this.props.list_dealBoard());
    
    this.componentDidMount=this.componentDidMount.bind(this);
    this.state = {
            dealbrdno: '',
            brdtitle:'',
            brdwriter:'',
            brdhit:'',
            payload:''
 
        };
    }
       componentDidMount(){
            
            this.props.list_dealBoard();
       }
render() {
    return (
		<table class="table table-striped table-bordered table-hover">
        <caption>중고거래게시판</caption>
        <thead>
            <tr>
                <th>#</th>
                <th>컬럼2</th>
                <th>컬럼3</th>
                <th>컬럼4</th>
                <th>컬럼5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{this.brdtitle}</td>
                <td>{this.brdwriter}</td>
                <td>데이터3</td>
                <td>데이터4</td>
                <td>데이터5</td>
            </tr>
           
        </tbody>
    </table>
    );

    }
}
const mapStateToProps = (state) => ({
  product: state.product
})
export default connect(mapStateToProps, { list_dealBoard })(productlist);
여기서 콘솔로그 프랍스에 찍으면..
  1. Promise {<pending>}
    1. __proto__Promise
    2. [[PromiseStatus]]"resolved"
    3. [[PromiseValue]]Object
      1. payloadArray(9)
        1. 0{createdAtnullupdatedAtnulldealbrdno1brdtitle"TestTitle"brdwriter"TestWriter", …}
        2. 1{createdAtnullupdatedAtnul
이안에 페이로드 내용을 뿌려줘야하거든요..위에 액션파일처럼 뽑아와야하는데..리턴 res했는데 어떻게 뽑아와야하는지요ㅜ
구글링해도 단일파일들은 그대로 들고옴 되는거같은데 이렇게 파일 분리되있는 상태에서 어떻게해야할지 모르겠습니다.
방법좀 알려주시면 감사하겠습니다

    1. 리듀서 파일입니다~

const initialState = {
  products: [],
  loading: false
}

export default function(state = initialState, action) {
  switch(action.type){
  
    case ADD_PRODUCT:
      return {
        ...state,
        products: [action.payload, ...state.products]
      }
    case LIST_DEALBOARD:
        return {
            ...state,
            products: [action.payload, ...state.products]
        }
    default:
      return state;
  }
}

요약하자면..컴포넌트파일에서 this.props.listboard를 불러오면 프로미스나 함수로 들고옵니다.이걸 맨위에 처럼 불러와야하는데..어떻게 짜야할지요..
0
  • 답변 5

  • ybleeho
    86
    2019-06-09 15:54:49

    action => reducer => get data from store  (use react-redux)

  • jeffdev
    2k
    2019-06-09 17:28:51

    무슨말인지 잘몰겠습니다ㅜㅜ

  • ifmoon
    80
    2019-06-09 19:36:34 작성 2019-06-09 19:39:17 수정됨

    우선 redux-devtools 설치하시구요 ㅎ.ㅎ... 코드가 굉장히 신선(?)한데 redux-saga나 redux-thunk 같은 비동기 처리 미들웨어 쓰시는 거 추천드려요ㅎㅎㅎ 액션에서 저렇게 비동기 쓰는 거 처음 보네요...


    mapStateToProps로 redux state에서 해당 컴포넌트의 props로 가져왔으니, render() 안에서 props로 쓰고 싶은 값 이용하시면 될 거에요 아마...

  • jeffdev
    2k
    2019-06-09 19:41:33 작성 2019-06-09 19:42:15 수정됨

    현재  리덕스성크쓰구있구 데브툴즈에선 값잘들고오고있어요~그값을 뿌려주고싶어서요ㅜ문제는 프랍스에 함수형태로불러와서요ㅜ

  • ybleeho
    86
    2019-06-09 20:16:03

    값을 store 에서 가져 옵니다 액션에서가져오지 않습니다

  • 로그인을 하시면 답변을 등록할 수 있습니다.