How to get data (of my api json) in my object ( Redux, React )?

Question

I not undestand everything with javascript etc, I want to get my data returned by ma action redux but i'have a problem with my code.

const mapStateToProps = state => {
    const group = state.groupReducer.group ? state.groupReducer.group  : [ ]
    return {
        group
    }

how i can get my data ?

When I try with that:

const mapStateToProps = state => {
    const group = state.groupReducer.group.data.data[0] ? state.groupReducer.group.data.data[0]  : [ ]
    return {
        group
    }

And my goal is map around group

    renderGroup = group => {
    return group.map((groups => {
        <div key={groups.data.data.id}>
        //
        </div>
    }))
}

Sagas.js

 export function* loadApiDataGroup() {
  try {
  // API 
    const response = yield 
    call(axios.get,'http://localhost:8000/api/group');
    yield put(loadGroup(response))
    } catch (e) {
      console.log('REQUEST FAILED! Could not get group.')
     console.log(e)
     }
      }

Action.js

 export function loadGroup(data){ return { type: LOAD_GROUP, data }};
 export function creatGroup(data){ return { type: CREATE_GROUP, data}};

// reducer

     export default function groupReducer( state= {}, action = {}){
     switch (action.type){
      case LOAD_GROUP:
        return {
            ...state,
            group: action.data
        }
     case CREATE_GROUP:
        return {
            ...state
        }
    default:
        return state
}

thank you to help me

Show the code where you do that Ajax request that you are printing. — acdcjunior
– acdcjunior, Commented Apr 22, 2018 at 1:19
Add your action creator and reducer related to your groups, so we can understand what's going on. — Denys Kotsur
– Denys Kotsur, Commented Apr 22, 2018 at 6:44

timotgl · Accepted Answer · 2018-04-22 08:26:15Z

1

Try

const mapStateToProps = state => ({
    group: state.groupReducer.group || []
});

Then you can use this.props.group in the component. Even though you might only want one thing in mapStateToProps, it's usually not directly returned like that.

If group is the response of an API request, you need to unpack data first, this is done in your async action creator (you will want to use redux-thunk or something similar):

const getGroup = () => async (dispatch) => {
    dispatch({ type: 'GET_GROUP_REQUEST' });
    try {
        const { data } = await axios.get('/some/url');
        dispatch({ type: 'GET_GROUP_SUCCESS', payload: data });
    } catch (error) {
        dispatch({ type: 'GET_GROUP_FAILURE', payload: error });
    }
};

answered Apr 22, 2018 at 8:26

timotgl

2,9441 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Novice-Dev Over a year ago

ok thank you :) i'm trying now. and i'have add my request ajax in my post

Novice-Dev Over a year ago

problem is résolut, i have do like that export function*

loadApiDataGroup() {          try {   	  // API              const response = yield call(axios.get,              'http://localhost:8000/api/group');              yield put(loadGroup(response.data.data))           } catch (e) {    	        console.log('REQUEST FAILED! Could not get group.')                 console.log(e)               }            }

Collectives™ on Stack Overflow

How to get data (of my api json) in my object ( Redux, React )?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related