我如何在反应中从 redux state 中提取数据

Question

我试图从 redux 发出 api 请求，然后将这些数据放入我的反应 state（arrdata）中。 api 调用有效，但我似乎无法在我的 app.js 上获取 state 以基于 redux Z8A35DA52ED10574E 调用进行更新。 我错过了什么吗？

应用程序.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arrdata: []
    };
  }
  componentDidMount() {
    this.props.loadData();
    console.log(this.props.data);
  }
  render() {
     const {arrdata} = this.state
    return ( ......)}}


const mapStateToProps = state => {
  return {
    data: state.data
  };
};

export default connect(mapStateToProps, dataAction)(App);

行动

export function loadData() {
  return dispatch => {
    return axios.get("https://api.coincap.io/v2/assets").then(response => {
      dispatch(getData(response.data.data.slice(0, 10)));
    });
  };
}

export function getData(data) {
  return {
    type: "GET_DATA",
    data: data
  };
}

减速器

let initialState = {
  data: []
};

const mainReducer = (state = initialState, action) => {
  if (action.type === "GET_DATA") {
    return {
      ...state,
      data: action.data
    };
  } else {
    return {
      ...state
    };
  }
};

export default mainReducer;

Answer 1

我认为你用 state 误导商店。 您的arrdata是空的，因为它存储在 state 中，但您的数据来自道具。

无论如何， arrdata中的 arrdata 仍然为空，因为您没有在任何地方设置 state。 为此，您必须使用例如getDerivedStateFromProps生命周期挂钩，但我不建议这样做。

render() {
   const { data } = this.props;
   console.log(this.props.data);

   return (
     // do something with your data
   );
}

它应该正确记录您的数据。

注意：实际上，您不需要 state。 这是操纵道具的更好方法，而不是将道具中的数据保存到 state（在大多数情况下）。