2016-11-20 16 views
0

私はAPIを呼び出して返されたUserオブジェクトの配列をstate.admin.usersに渡すことを控えています。Redux:APIを呼び出した後に状態を更新することができません

マイコード: //コンポーネント

class MyComponent extends Component { 
    componentWillMount() { 
    console.log('componentWillMount()'); 
    this.props.fetchAllUsers(); 
    } 

    render() { 
    return (
     <div> 
     <ul> 
     { 
      this.props.users.map(function(user) { 
       return <div>user.email</div> }) 
     } 
     </ul> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    console.log('state:' + JSON.stringify(state)); 
    return { 
     users: state.admin.users 
    } 
} 

export default connect(mapStateToProps, {fetchAllUsers})(myComponent); 

//減速

const INITIAL_STATE = { users:[] }; 

export default function (state = INITIAL_STATE, action) { 
    return { ...state, users:action.payload }; // Any problem here? 
} 

//アクション

export function fetchAllUsers() { 
    return function(dispatch) { 
    axios.get(`${API_URL}/users`) 
    .then(response => { 
     console.log('response.data:' +JSON.stringify(response.data)); 
     dispatch({ 
     type: FETCH_ALL_USERS, 
     payload: response.data // Any problems here? 
     }); 
    }) 
    .catch(response => dispatch(errorHandler(response.data.error))) 
    } 
} 

コンソール出力

状態:{ "管理者" は:{}} bundle.js:2570:1

componentWillMountを()bundle.js:295:8

OPTIONS XHR http://myip:3001/api/users [HTTP/1.1 200 OK 2ミリ秒]

OK Fを見response.data

GETのXHR http://myip:3001/api/users [HTTP/1.1 304 4MSを変更していない]除去

response.data:[{data} {データが削除} {データが削除}]

それともわたし。上記のコードに問題はありますか?なぜstate.adminは空ですか?なぜcomponentWillMount()mapStateToPropsの後に呼び出されますか?

コメントは歓迎します。おかげ

答えて

0

あなたの減速は、次のようになります。

export default function (state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case FETCH_ALL_USERS: 
     return Object.assign({}, state, { 
     users: action.payload 
     }); 
    } 
    return state; 
} 

また、あなたのスニペットは、あなたのルート減速を定義した方法を示していません。この還元剤を指すadminキーがありますか?

+0

ディスパッチ({ タイプ:FETCH_ALL_USERS、 ペイロード:レスポンスデータ });は失敗したようです。 – BAE

+0

エラーケースを 'catch'ではなく' then'の第2引数として書き直してみてください。 https://github.com/facebook/react/issues/7617#issuecomment-247710003 –

関連する問題