ReactJs Redux数据获取

Question

我刚刚开始从事React Js和Redux-Thunk的开发。 目前，我正在尝试使用redux-thunk从URL获取数据。 我成功获取了数据，但问题是它两次渲染undefined数据，然后在道具中给了我所需的数据。 这是我的代码。

在Actions index.js中

function getData() {
 return {
    type: 'FETCH'
 }
}

function getSuccess(data) {
 return {
    type: 'FETCH_SUCCESS',
    payload: data
 }
}

function getFailed(err) {
 return {
    type: 'FAILED',
    payload: err
 }
   }

export function fetchData() {
const thunk = async function thunk(dispatch) {
    try {
        dispatch(getData());
        const body = await fetch("http://jsonplaceholder.typicode.com/users")
        const res = await body.json();
        console.log("Thunk", res);
        dispatch(getSuccess(res));
    }
    catch(err) {
        dispatch(getFailed(err));
    }
}
return thunk;
}

在Reducers fetch.js中

const initialState = {
 state: []
}

export default function(state=initialState , actions) {
switch(actions.type) {
    case 'FETCH':
        return {
            ...state
        }
    case 'FETCH_SUCCESS':
        return {
            ...state,
            data: actions.payload
        }
    case 'FAILED':
        return {
            ...state
        }
    default:
        return state;            
}
}

减速器Index.js

import fetch from './fetch';
import { combineReducers } from 'redux';

const rootReducer = combineReducers ({
    fetch
});

export default rootReducer;

App.js

import React, { Component } from 'react';
import './App.css';
import Main from './component/Main';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);
console.log("STore", store.getState());
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Main/>        
      </Provider>
    );
  }
}

export default App;

Main.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
class Main extends Component {


    componentWillMount() {
        const { fetchData } = this.props
        fetchData();
    }

    render() {
        let mydata = this.props.data.data;
        console.log("Data .....<>", mydata);
        return(
            <div>
                Main     
            </div>
        );
    }
}


const mapStateToProps =(state)=> {
    return {
        data: state.fetch
    }
}

export default connect(mapStateToProps, {fetchData: actions.fetchData})(Main);

输出屏幕截图

请让我知道我在做什么错。 任何帮助将不胜感激。 谢谢

Answer 1

此行为是正确的。 你正在做的正常方式的一切，除了在调用异步操作componentWillMount方法，而不是componentDidMount 。 在此处了解更多信息。

您需要知道，当您使用componentDidMount -由于组件生命周期中的commit阶段，您可以安全地处理此问题，这意味着您的请求将被确保触发一次，而不是可能触发多次（可以在render阶段） 。

请参阅此处的可视图以了解更多信息。

关于几个效果图-可以很容易地解释。 第一次，在安装组件时，您正在调用异步操作，与组件安装相比，它需要更多的时间来加载数据。 这就是为什么要访问initialState的data属性（它是空数组）并获取undefined 。

当您准备好响应并调度操作时，redux会触发以新状态重新渲染连接的组件。

如果要使async-await语法有效，则还应使用async关键字进行生命周期设置，然后await内部await请求。

注意 ：这是安全的，但是在某些情况下可能会导致意外的错误，因此请记住。 但是， 我不建议以这种方式使用它。 在SO的另一个线程中了解此主题。

我建议您在化isLoading创建一些isLoading布尔状态，并跟踪是否加载了数据。

祝好运！ 希望对您有所帮助！

Answer 2

您的代码没有错，但是有一个不必要的动作。 为什么看到两次undefined然后看到数据？

1. 第一个来自初始渲染。 您正在componentWillMount中进行异步调度，因此render不会等待它，然后尝试记录数据。 当时它是undefined 。

2. 您的fetchData调度两个操作： getData和getSuccess 。 由于getData动作，您会看到第二个undefined状态，因为它返回当前状态， props.data.data再次未定义。

3. 您会看到数据，因为getSuccess现在getSuccess更新您的状态。

如果要在fetchData函数中测试出getData的fetchData ，只需使用getSuccess并在render中更改console.log ，如下所示：

mydata && console.log("Data .....<>", mydata);

我认为getData操作在这里是不必要的，除了返回当前状态外，它不执行任何操作。 另外，请尝试使用componentDidMount而不是componentWillMount因为它将在版本17中弃用。