我如何在反應中從 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（在大多數情況下）。