React-select: fill react-select using redux

Created on 22 Feb 2017  路  3Comments  路  Source: JedWatson/react-select

i am working on application in which i use react with redux. i am stuck how to fill my dropdown list with data(from api responce). How ever i have work around to fill dropdown list. but i want to know what is the standard way to fill dropdown list using react with redux. Any help will be very great. i pasted my code which i try.
projectTypeAction.jsx :-

export const FETCH_PROJECTTYPE="FETCH_PROJECTTYPE";
    export const FETCH_PROJECTTYPE_SUCCESS="FETCH_PROJECTTYPE_SUCCESS";
    export const FETCH_PROJECTTYPE_FAILURE="FETCH_PROJECTTYPE_FAILURE";

   export function fetchProjectType(){
      const request=axios({
        url:`${URL.ROOT_URL}/projecttype`,
        method:'GET',
        Headers:[]
      });
      return{
        type:FETCH_PROJECTTYPE,
        payload:request
      }
    }

    export function fetchProjectTypeSuccess(projectTypes){
      return{
        type:FETCH_PROJECTTYPE_SUCCESS,
        payload:projectTypes
      }
    }

    export function fetchProjectTypeFailure(error){
      return{
        type:FETCH_PROJECTTYPE_FAILURE,
        payload:error
      }
    }
projectReducer.jsx :- 
import {FETCH_PROJECTTYPE,FETCH_PROJECTTYPE_SUCCESS,FETCH_PROJECTTYPE_FAILURE} from '.././actions/project.jsx';

const INITIAL_STATE={
  projectTypeList:{projectTypes:[],error:null,loading:false},
}

export default function (state=INITIAL_STATE, action) {
  let error;
  switch (action.type){
    case FETCH_PROJECTTYPE:
      return {...state,projectTypeList:{projectTypes:[],error:null,loading:true}};

    case FETCH_PROJECTTYPE_SUCCESS:
      return {...state,projectTypeList:{projectTypes:action.payload,error:null,loading:false}};

    case FETCH_PROJECTTYPE_FAILURE:
      error = action.payload || {message: action.payload.message};
      return{...state,projectTypeList:{projectTypes:[],error:error,loading:false}};

    default:
      return state;

  }
}



md5-11dd1f7564ab222aa469163f66a71f49



projectTypeContainer.jsx :- 
import {connect} from 'react-redux';
import {fetchProjectType,fetchProjectTypeSuccess,fetchProjectTypeFailure} from '.././actions/project.jsx';
import SelectOption from '.././components/renderSelectOption.jsx';

const mapStateToProps=(state)=>{
  return{
    projectTypeList:state.projectTypes.projectTypeList
  }
}

const mapDispatchToProps=(dispatch)=>{
  return{
    fetchProjectType:()=>{
      dispatch(fetchProjectType()).then((response)=>{
        !response.error ? dispatch(fetchProjectTypeSuccess(response.payload.data.objdata)):dispatch(fetchProjectTypeFailure(response.payload.data))
      });
    }
  }
}

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

Now here i am stuck . how and where i call these methods to fill react-select

All 3 comments

use stackoverflow not github

ok thanks

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.

Was this page helpful?
0 / 5 - 0 ratings