0
少し試行錯誤した結果、私は最終的に私のアクションクリエイターが適切に働き、私が望んでいたデータをレミックスストアに渡すことができました。今まで私はこれを "手動で"このstore.dispatch(fetchTest());のようにディスパッチしてきましたが、これらのデータをコンポーネントに使用できるかどうかは素晴らしいでしょう。だからここRedux-thunkによる非同期アクションを処理するためのコンポーネント構造
は、自分の行動の作成者である：ここで
export const fetchTest =() => (dispatch) => {
dispatch({
type: 'FETCH_DATA_REQUEST',
isFetching:true,
error:null
});
return axios.get('http://localhost:3000/authors')
.then(data => {
dispatch({
type: 'FETCH_DATA_SUCCESS',
isFetching:false,
data: data
});
})
.catch(err => {
dispatch({
ype: 'FETCH_DATA_FAILURE',
isFetching:false,
error:err
});
console.error("Failure: ", err);
});
};
は私の減速である：
const initialState = {data:null,isFetching: false,error:null};
export const ThunkData = (state = initialState, action)=>{
switch (action.type) {
case 'FETCH_DATA_REQUEST':
case 'FETCH_DATA_FAILURE':
return { ...state, isFetching: action.isFetching, error: action.error };
case 'FETCH_DATA_SUCCESS':
return Object.assign({}, state, {data: action.data, isFetching: action.isFetching,
error: null });
default:return state;
}
};
store.dispatch(fetchTest());を使用するときにこれまでのところ、すべてが正常に動作しています。このexampleに基づいて
は、私は、次のコンポーネントを構築しようとした：
class asyncL extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.fetchTest(this.props.thunkData)
// got an error here : "fetchTest is not a function"
}
render() {
if (this.props.isFetching) {
return console.log("fetching!")
}else if (this.props.error) {
return <div>ERROR {this.props.error}</div>
}else {
return <p>{ this.props.data }</p>
}
}
}
const mapStateToProps = (state) => {
return {
isFetching: state.ThunkData.isFetching,
data: state.ThunkData.data.data,
error: state.ThunkData.error,
};
};
const AsyncList = connect(mapStateToProps)(asyncL);
export default AsyncList
それは動作しません、私はどこか別の場所componentWillMount()、おそらく上のエラーを持っています。
また、私のデータ構造は奇妙です。実際にデータ配列に到達するには、私はstate.ThunkData.data.dataをしなければなりません。最初のデータオブジェクトはrequest,headersなどの無用なものでいっぱいです...
このコンポーネントを書くにはどうすれば非同期データをconsole.logに渡すことができますか？
ありがとうございました。