が反応/ Reduxの

Question

私が反応し、Reduxの使用していて、次が可能であった場合には思っていた：

は、私が「編集フォーム」コンポーネントを作ってるんだと私は設定したいですpreselectedの初期状態はthis.props.user.preselected.idになります。

私は初期value.Iがnull値を得続ける設定した場合を除き、どこでもthis.props.user.preselected.idを呼び出すことができますし、私は減速this.props.userがthis.props.fetchSingleUserが完了した後にのみ表示されますので、それはだと信じています。

同じコンポーネント内で現在フェッチされているレデューサーに初期状態を設定することはできますか？

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; 
} 

Answer 1

あなたは、ユーザデータを受信したら、あなただけのフォームをレンダリングする必要があると思いませんか：

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

減速action.js

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 
    }; 
} 

？

• とredux thunkフェッチが完了すると、USER_LOADEDアクションを送信できます。
• この新しいアクションがuserLoaded = true
• でReduxのストアを更新してしまう、あなたはあなたにuser.loadedを渡すことができ、フォーム

Answer 2

Verry共通のアプローチを表示するコンポーネントを反応させ非同期操作のための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小道具を得ることができます/私はちょうど私の行動の作成者に追加フォーム