redux-thunkを使用してAJAXリクエストで状態を設定する

Question

私はredux-thunkで遊んでいて、ランダムなAPIからデータを取得しようとしています。私は質問があります： 私のコンソールのスクリーンショットでわかるようにコンソールのロギング時に空の配列を2回取得します。これは本当にうまくいきます。私は何か間違っているようです。空の配列を記録しないように要求を行うにはどうすればいいですか？ componentWillMountでデータを要求すると、同じ結果が得られます。

ストア：

const initialState = { 
    users: { 
    isFetching: false, 
    receivedAt: null, 
    error: null, 
    userList: [] 
    } 
} 

const store = createStore(
    rootReducer, 
    initialState, 
    applyMiddleware(
    thunk, 
    createLogger() 
) 
) 

リデューサー：

function users(state = {},action) { 
    switch(action.type) { 

    case 'REQUEST_USERS': 
    return { 
     ...state, 
     isFetching:true 
    } 

    case 'RECEIVE_USERS': 
    return { 
     ...state, 
     isFetching: false, 
     receivedAt: action.receivedAt, 
     userList: action.users 
    } 
    case 'REQUEST_ERROR': 
    return { 
     ...state, 
     error: action.err 
    } 

    default: return state 
    } 
} 

const rootReducer = combineReducers({ 
    users 
}) 

ActionCreators：

export function requestUsers() { 
    return { 
    type:'REQUEST_USERS' 
    } 
} 

function receiveUsers(users) { 
    return { 
    type:'RECEIVE_USERS', 
    users: users.results, 
    receivedAt: Date.now() 
    } 
} 

function requestError(err) { 
    return { 
    type:'REQUEST_ERROR', 
    err 
    } 
} 

export function loadUsers() { 
    return dispatch => { 
    dispatch(requestUsers()) 
    return fetch('https://randomuser.me/api/?results=50') 
    .then(response => response.json()) 
    .then(users => dispatch(receiveUsers(users))) 
    .catch(err => dispatch(requestError(err))) 
    } 
} 

コンテナのコー​​ド：

function mapStateToProps (state) { 
    return { 
    users: state.users 
    } 
} 

function mapDispatchToProps (dispatch) { 
    return bindActionCreators(actionCreators, dispatch) 
} 

const App = connect(mapStateToProps, mapDispatchToProps)(Main) 

私のコンポーネントのコード：

componentDidMount() { 
    this.props.loadUsers() 
    } 

    render() { 
    const {userList} = this.props.users 
    console.log(userList) 
    const users = userList.map((user,i) => <li key={i}>{user.name.first + ' ' + user.name.last}</li>) 
    return (
     <div> 
     <ul> 
      {users} 
     </ul> 
     </div> 
    ) 
    } 
} 

Answer 1

私はそれを考え出したと思います。レンダリング機能は、マウント時と状態変更時に2回呼び出されるだけなので、これはコンソールに表示されるのは普通のことです。

はい、あなたは正しいです。 AJAXリクエストが返されたときだけ、実際にアイテムがストアに追加されます。

場合によっては、サーバーの応答を予測する（作成/更新など）ことができます。その場合、予測された結果をREQUEST_USERSアクションのペイロードに追加し、より速く見えるUIを得ることができます。