非同期呼び出しでクエリパラメータにアクセスする（react redux）

Question

私のreactx（4.4.5）プロジェクトでは、react-router-redux（4.0.5）とredux-async-connect（0.1.13）を使用しています。コンテナコンポーネントを読み込む前に、私のAPIから非同期にデータをロードしたいと思います。 urlには、メッセージを取得するために使用される "category"という名前のクエリパラメータが含まれています。すなわち、ユーザー/ cornel/messages？category = react-redux

私の場所/パスにリンクされたパラメータはstate.routing.locationBeforeTransitionsにありますが、これらは非同期呼び出し時に最新ではありません。 async関数に渡されるparamsパラメータからパスパラメータを取得できますが、クエリパラメータは含まれていません。

@statics({ 
    reduxAsyncConnect(params, store) { 
    const { dispatch } = store; 
    return Promise.all([ 
     dispatch(loadMessages(category)) <-- need the query parameter "category" here 
    ]); 
    } 
}) 
@connect(state => ({ 
    messages: state.user.messages 
})) 
export default class HomeContainer extends Component { 
    static propTypes = { 
    dispatch: PropTypes.func 
    messages: PropTypes.array.isRequired 
    }; 

    render() { 
    const { messages } = this.props; 

    return (
     ... 
    } 
    } 
} 

クエリパラメータにどのようにアクセスしてクライアントとサーバーの両方で動作するようにすればよいですか？ ありがとうございます！

Answer 1

react-redux-routerを使用している場合は、次のようにredux状態から検索する必要があります。

@statics({ 
    reduxAsyncConnect(params, store) { 
    const { dispatch } = store; 
    return Promise.all([ 
     dispatch(loadMessages(category)) <-- need the query parameter "category" here 
    /* you might get 
     store.getState(). 
      routing.locationBeforeTransitions.search 
     from here too */ 
    ]); 
    } 
}) 
@connect(state => ({ 
    messages: state.user.messages, 
    /* get search from redux state */ 
    search : state.routing.locationBeforeTransitions.search 
})) 
export default class HomeContainer extends Component { 
    static propTypes = { 
    dispatch: PropTypes.func 
    messages: PropTypes.array.isRequired 
    }; 

    render() { 
    const { messages } = this.props; 

    return (
     ... 
    } 
    } 
} 

ご利用いただけない場合は教えてください。ここで

EDIT

はreduxAsyncConnectを使用して、あなたが何をしたい達成しないコードの一部です。

// CONSTANTS 
const 
    GET_SOMETHING_FROM_SERVER = 'GET_SOMETHING_FROM_SERVER', 
    GET_SOMETHING_FROM_SERVER_SUCCESS = 'GET_SOMETHING_FROM_SERVER_SUCCESS', 
    GET_SOMETHING_FROM_SERVER_FAIL = 'GET_SOMETHING_FROM_SERVER_FAIL'; 

// REDUCER 
const initialState = { 
    something : [], 
    loadingGetSomething: false, 
    loadedGetSomething:false, 
    loadGetSomethingError:false 
}; 

export default function reducer(state = initialState, action) { 

    switch(action.type) { 

    case GET_SOMETHING_FROM_SERVER: 
     return Object.assign({}, state, { 
     loadingGetSomething: true, 
     loadedGetSomething:false, 
     loadGetSomethingError:false 
     something : [] // optional if you want to get rid of old data 
     }); 
    case GET_SOMETHING_FROM_SERVER_SUCCESS: 
     return Object.assign({}, state, { 
     loadingGetSomething: false, 
     loadedGetSomething:true, 
     something : action.data 
     }); 
    case GET_SOMETHING_FROM_SERVER_FAIL: 
     return Object.assign({}, state, { 
     loadingGetSomething: false, 
     loadGetSomethingError: action.data 
     }); 
    default: 
     return state; 
    } 

}; 

// ACTIONS 

/* ----------------- GET SOMETHING ACTIONS START ----------------- */ 
import Fetcher from 'isomorphic-fetch'; // superagent , axios libs are okay also 

export function getSomething() { 
    return { 
    type : GET_SOMETHING_FROM_SERVER 
    } 
}; 
export function getSomethingSuccess(data) { 
    return { 
    type : GET_SOMETHING_FROM_SERVER_SUCCESS, 
    data 
    } 
}; 
export function getSomethingFail(data) { 
    return { 
    type : GET_SOMETHING_FROM_SERVER_FAIL, 
    data 
    } 
}; 
export function getSomethingAsync(paramsToBeSentFromComponents){ 
    return function(dispatch) { 
    const fetcher = new Fetcher(); 

    dispatch(getSomething()); // so we can show a loading gif 

    fetcher 
     .fetch('/api/views', { 
     method : 'POST', 
     data : { 
      // use paramsToBeSentFromClient 
     } 
     }) 
     .then((response) => { 
     dispatch(getSomethingSuccess(response.data)); 
     }) 
     .catch((error) => { 
     return dispatch(getSomethingFail({ 
      error : error   
     })) 
     }); 
    } 
} 
/* ----------------- GET SOMETHING ACTIONS END ----------------- */ 


// COMPONENT 

import React, {Component}  from 'react'; 
import { connect }    from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as somethignActions from './redux/something'; 

@connect((state) => ({ 
    pathname : state.routing.locationBeforeTransitions.pathname, 
    something : state.something 
})) 

export default class SettingsMain extends Component{ 

    constructor(props){ 
    super(props); 
    this.somethingActions = bindActionCreators(somethingActions, this.props.dispatch); 
    } 

    componentDidMount(){ 
    // you are free to call your async function whenever 
    this.settingActions.getSomething({ this.props.pathname...... }) 
    } 

    render(){ 
    return (/* your components */) 
    } 
}