Ожидание вызова Ajax перед установкой начального состояния React/Redux

Я использую реагировать и перевождь и было интересно, если следующее было возможно:Ожидание вызова Ajax перед установкой начального состояния React/Redux

Я делаю «Редактировать форму» компонент, и я хочу, чтобы установить начальное состояние preselected. this.props.user.preselected.id.

Я могу назвать this.props.user.preselected.id где-нибудь в случае установки начального value.I продолжать получать нулевое значение, за исключением, и я считаю, что это потому, что редуктор this.props.user появляется только после того, как this.props.fetchSingleUser завершена.

Можно ли установить начальное состояние на редуктор, который в настоящее время извлекается внутри одного и того же компонента?

class PropertyEdit extends Component { 

    static contextTypes = { 
    router: PropTypes.object 
    }; 

    constructor(props) { 
     super(props); 
     this.state = { 
      preselected= this.props.user.preselected.id 
     };  
    } 


    componentWillMount() { 
    this.props.fetchSingleUser(this.props.params.id); 
    } 

.... 


function mapStateToProps(state) { 
    return { 
    user:state.user.single 
    }; 
} 


function mapStateToProps(state) { 
    return { 
    user:state.users.single 
    }; 
}

action.js

export function fetchSingleUser(id) { 
    return function(dispatch) { 
    axios.get(`${URL}/users/${id}`) 
    .then(response => { 
     dispatch({ 
     type:FETCH_USER, 
     payload: response 
     }); 
    }) 
    .catch(() => { 
     console.log("Error "); 
    }); 
    } 
}

редуктор:

const INITIAL_STATE = { single: null }; 

export default function(state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case FETCH_USER: 
     return {...state, single: action.payload.data}; 
    } 
    return state; 
}

источник

2016-08-24 lost9123193

Вы не думаете, что вы должны оказывать только форму, как только вы получили пользовательские данные?

с сокращением thunk вы можете испустить действие USER_LOADED после того, как выбор сделан.
это новое действие обновит Redux магазин с userLoaded = true
тогда вы могли бы пройти user.loaded в вашей реакции компонент для отображения формы

источник

2016-08-24 19:01:04 sylvain

Я просто добавил в своем действии создателя. Я думаю, что это имеет смысл. Вы говорите, что я должен отправить другое действие после того, как я выберу пользователя и установил его как мой редуктор для отображения в компоненте? – lost9123193

Можете ли вы также показать свой редуктор, пожалуйста? – sylvain

уверен, что добавил. – lost9123193

Верри общего подхода должны иметь 3 действий для операции асинхронной

types.js

export const FETCH_USER_REQUEST = 'FETCH_USER_REQUEST' 
export const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS' 
export const FETCH_USER_FAIL = 'FETCH_USER_FAIL'

reducer.js

import {combineReducers} from 'redux'; 
import * as types from './types'; 

const isFetching = (state = false, action) => { 
    switch (action.type) { 
    case types.FETCH_USER_REQUEST: 
     return true; 
    case types.FETCH_USER_SUCCESS: 
    case types.FETCH_USER_FAIL: 
     return false; 
    default: 
     return state; 
    } 
}; 

const data = (state = {}, action) => { 
    switch (action.type) { 
    case types.FETCH_USER_SUCCESS: 
     return action.payload.data; 
    } 
    return state; 
}; 

export default combineReducers({ 
    isFetching, 
    data 
});

Таким образом, вы можете получить isFetching опору в компоненте и показать/скрыть вашу форму

источник

2016-08-24 19:53:25

Ожидание вызова Ajax перед установкой начального состояния React/Redux

ответ

Смежные вопросы