React-redux- 从 API 获取数据

Question

I am working on a project and I need to fetch data from backend or from an API. I tried fetch the data but nothing appears. I think I am doing something wrong in the container. I am a beginner in react-redux, I don't know what I am doing wrong. I've already read all the posts but nothing seems to works. my reducer:

const initialState={
  articles: [],
}; 

const rootReducer = (state = initialState, action) => {
  const { type, payload }=action;
  switch(type) {
    case SRETRIEVE_ARTICLE:{
      return {
        ...state,
        articles:payload,
      };
    }

    default: return state;
  }
}

export default rootReducer;

This is what I have right now in container:

import Articles from 'components/Articles';
import { fetchArticles } from '../../pages/index';

const mapStateToProps = (state) => ({
    articles:state.articles
  })

  const ConnectedArticles = connect(
    mapStateToProps,
    {fetchArticles}
  )(Articles)

export default ConnectedArticles;

pages.js

  axios.get('API').then((response) => {
    const { data } = response;

    dispatch({ type: RETRIEVE_ARTICLES, payload: data });
  });
};

const Index = () => {
 
  const articles= useSelector((state) => state.articles);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchArticles);
  }, []);

  return <>{articles && articles.map((article) => <Article key={article.id} name={article.name} />)}</>;
};
Index.getInitialProps = async () => ({
  authRequired: true,
  label: 'Dashboard',
});



export default Index;

Also I defined the action type: export const SET_UNOPENED_REWARD = 'SET_UNOPENED_REWARD'; and action const unopenedRewards = (payload) => ({ type: SET_UNOPENED_REWARD, payload });

Answer 1

you should use async and await

let response = await axios.get('https://run.mocky.io/v3/5c045896-3d18-4c71-a4e5-5ed32fbbe2de')

if(response.status==200){
   dispatch({ type: RETRIEVE_ARTICLES, payload: data });
}

Answer 2

One very nice way to do data fetching with redux is to use redux toolkit's createAsyncThunk and createSlice functions.

// src/features/articles/articlesSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const fetchArticles = createAsyncThunk("articles/get", async () => {
  // Here you can use axios with your own api
  const response = await fetch("https://rickandmortyapi.com/api/character");
  const json = await response.json();
  return json.results;
});

export const slice = createSlice({
  name: "articles",
  initialState: {
    loading: false,
    data: []
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchArticles.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(fetchArticles.fulfilled, (state, action) => {
      state.data = action.payload;
      state.loading = false;
    });
    builder.addCase(fetchArticles.rejected, (state) => {
      state.loading = false;
    });
  }
});
export default slice.reducer;

---

// src/features/articles/Articles.js

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchArticles } from "./articlesSlice";

export const Articles = () => {
  const articles = useSelector((state) => state.articles.data);
  const loading = useSelector((state) => state.articles.loading);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchArticles());
  }, []);

  return (
    <>
      {loading && "...loading"}
      {articles.map((article) => <Article key={article.id} {...article} />)}
    </>
  );
};