私はReactアプリケーションを作成し、Reduxを統合して状態を管理し、ネットワーク要求を行います。React - Redux - コンポーネントにフェッチされたデータを接続します。
私はTodoチュートリアルに従いました。私はreduxウェブサイトから非同期の例に従っていますが、私は固執しています。
私の問題は、私のアプリケーションでは、リモートサーバーからユーザーをフェッチすることです。サーバーが私にオブジェクトを含むjson配列を送ります(サーバーが私に直接オブジェクトを送るのであれば?) jsonは私のように見えます(私は2つのフィールドだけを置いていますが、実際にはもっとたくさんあります):
[{first_name: "Rick"、 "last_name": "Grimes"}]
とにかく私はサーバーからデータを取得できますが、ユーザーのデータをアプリケーションに挿入することはできません。最も重要なのは、なぜそれが機能しないのか理解していることです。ここで
は私のいくつかのファイルです:アクション/ index.js
export const REQUEST_CONNECTED_USER = 'REQUEST_CONNECTED_USER';
export const RECEIVE_CONNECTED_USER = 'RECEIVE_CONNECTED_USER';
function requestConnectedUser(){
return {
type: REQUEST_CONNECTED_USER
}
}
function receiveConnectedUser(user){
return {
type: RECEIVE_CONNECTED_USER,
user:user,
receivedAt: Date.now()
}
}
export function fetchConnectedUser(){
return function(dispatch) {
dispatch(requestConnectedUser());
return fetch(`http://local.particeep.com:9000/fake-user`)
.then(response =>
response.json()
)
.then(json =>
dispatch(receiveConnectedUser(json))
)
}
}
減速/インデックス:
私は2つのアクション、要求用と応答のために他のを持っています。 js
import { REQUEST_CONNECTED_USER, RECEIVE_CONNECTED_USER } from '../actions
function connectedUser(state= {
}, action){
switch (action.type){
case REQUEST_CONNECTED_USER:
return Object.assign({}, state, {
isFetching: true
});
case RECEIVE_CONNECTED_USER:
return Object.assign({}, state, {
user: action.user,
isFetching: false
});
default:
return state;
}
}
私は最後に、Profile.jsという名前のコンテナ要素を持っています上記のコードで
import React from 'react';
import { fetchConnectedUser } from '../actions';
import { connect } from 'react-redux';
class Profile extends React.Component{
constructor(props){
super(props);
}
componentDidMount() {
const { dispatch } = this.props;
dispatch(fetchConnectedUser());
}
render(){
const { user, isFetching} = this.props;
console.log("Props log :", this.props);
return (
<DashboardContent>
{isFetching &&
<div>
Is fetching
</div>
}
{!isFetching &&
<div>
Call component here and pass user data as props
</div>
}
</DashboardContent>
)
}
}
function mapStateToProps(state) {
const {isFetching, user: connectedUser } = connectedUser || { isFetching: true, user: []}
return {
isFetching,
user: state.connectedUser
}
}
export default connect(mapStateToProps)(Profile)
、私はいつもIs Fetching
段落という表示がありますが、私はそれを削除しても、私は、ユーザーのデータにアクセスすることはできません。 私はconsole.logに私のアクションがディスパッチされ、状態にデータが追加されているのを見ることができるので、何かの始まりがあると思うが、このデータとUIコンポーネントのリンク通信で何かが見当たらないと思う。 私は良い方法でいるのですか、私はリファクタリングすることがたくさんありますか?どんな助けでも大変助かります!