CODEWITHSUNDEEP
reactjsreduxreact-redux
DustBoy
DustBoy

Reputation: 153

redux to dispatch response and a return message

In my action i am dispatching the type and the payload but what if i also want the res.status and a return JSON message to be included into my props. How would i do so in my action and reducer?

action

export const fetchUserPosts = () => (dispatch) => {
  fetch(`${currentPort}/user/recipes`,
    {
      withCredentials: true,
      credentials: 'include',
    })
    .then((res) => {
      if (res.status !== 401) return res.json().then((data) => data);
      return { message: { msgBody: 'UnAuthorized' }, msgError: true };
    })
    .then((posts) => dispatch({
      type: FETCH_USER_POSTS,
      payload: posts,
    }));
};

reducer

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_USER_POSTS:
      return {
        ...state,
        fetchUsersPosts: action.payload,
      };
    
    default:
      return state;
  }
}

Upvotes: 0

Views: 2284

Answers (2)

Ori Drori
Ori Drori

Reputation: 191976

You can combine multiple items into a single payload. I would create different actions for success and error. Using the same action complicates the reducers logic. It's also easier to work with async/await then with nested promises.

This is a working example that uses SpaceX open API:

const FETCH_USER_POSTS_SUCCESS = 'FETCH_USER_POSTS_SUCCESS'
const FETCH_USER_POSTS_FAILED = 'FETCH_USER_POSTS_FAILURE'

const fetchPostSuccessAction = (payload) => ({
  type: 'FETCH_USER_POSTS_SUCCESS',
  payload,
})

const fetchPostFailureAction = (payload) => ({
  type: 'FETCH_USER_POSTS_FAILURE',
  payload,
})

const fetchUserPosts = () => async dispatch => {
  const res = await fetch('https://api.spacexdata.com/v3/launches/latest');
  
  if (res.status !== 401) {
    const { ships: posts } = await res.json();
    
    dispatch(fetchPostSuccessAction({
      posts,
      status: res.status,
    }))
  } else {
    dispatch(fetchPostFailureAction({ 
      message: { msgBody: 'UnAuthorized' },
    }))
  }
};

fetchUserPosts()(console.log)

The reducer can handle the object by destructuring it, and the properties to the new state in any way you need. You can also change other properties, for example changing errMsg to true or false according to the action's type:

export default function (state = initialState, { type, payload }) {
  switch (type) {
    case FETCH_USER_POSTS_SUCCESS: {
      const { posts, status } = payload;
      
      return {
        ...state,
        status,
        fetchUsersPosts: posts,
        msgError: false,
        message: null
      };
    }
      
    case FETCH_USER_POSTS_FAILURE: {
      const { message } = payload;
      
      return {
        ...state,
        status: 401,
        fetchUsersPosts: null,
        msgError: true,
        message
      };
    }
    
    default:
      return state;
  }
}

Upvotes: 1

Colin Hale
Colin Hale

Reputation: 870

If I am following correctly you are using this action inside of a component to send a fetch. You don't have access to the components props with the reducer. You can send the http request in the component and use that to store the response in the state. Or use connect from 'react-redux' package to map the redux store to access the fetch result.

import { connect } from 'react-redux'

    
const component = props => {
 //to access redux state in component use props.myprop
 
 return <div>{props.myprops.title}</div>
}

const mapStateToProps = state => {
 return{
  myprop: state.fetchUsersPosts
 }
}

export default connect(mapStateToProps)(component)

If this was what you were looking for you can learn more at https://react-redux.js.org/api/connect

Upvotes: 1

Related Questions