redux 钩子从 API 获取数据，并在单独的文件中执行操作

Question

我正在从库“react-redux”中学习 redux hooks，因为我还需要在项目的功能组件中应用 Redux。

到目前为止，我不明白如何使用与我用于 class 组件的连接相同的 redux HOC 项目结构。

具体来说，我有一个单独的操作文件，它使用 axios 调用我的 API：

FoosActions.js

import axios from "axios";
import {
  GET_FOO,
} from "./Types";

};

export const getFoo = () => async (dispatch) => {
  const res = await axios.get("/api/v1/foos");
  dispatch({
    type: GET_FOO,
    payload: res.data,
  });
};

FooList.js:

import { connect } from "react-redux";
import { getFoos } from "../../actions/FoosActions";

class FoosList extends Component {
  constructor() {
    super();

    this.state = {
      errors: {},
    };
  }
  componentDidMount() {
    this.props.getFoos();
  }
  
   render() {
    const { data } = this.props.foo;       
    return (

        <div className="container">
            <h2>foo data fetched from API endpoint  : </h2>
            <ul>
              {data.map((foo) => {
                return (
                    <li>
                      {foo.id} - {foo.name}
                    </li>
                );
              })}
              <ul>
            </div>
          </div>
        </div>
       
    );
  }
}

  const mapStateToProps = (state) => ({
    foo: state.foo,
    errors: state.errors,
  });

export default connect(mapStateToProps, { getFoos })(FooList);

FooReducer,js

import { GET_FOO} from "../actions/Types";

const initialState = {
  foos: [],

};

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_FOO:
      return {
        ...state,
        foos: action.payload,
      };

现在在我的功能组件中： FooListFC.js

import { useDispatch, useSelector } from "react-redux";
import { getFoo } from "../../actions/FoosActions";
const Mapping = (props) => {
    
  const [foo, setFoo] = useState([]);
  const dispatch = useDispatch();
  

  useEffect(() => {
    dispatch(getFoo());
    const fooRetrieved = useSelector((state) => state.foo);
    setFoo(fooRetrieved);
  }, []);
    
    return (
      <div className="container">
         <h2>foo data fetched from API endpoint  : </h2>
            <ul>
              {foo.map((foo) => {
                return (
                    <li>
                      {foo.id} - {foo.name}
                    </li>
                );
              })}
            </ul>
      </div>
    )

}

如何重现从 API 组件中的 API 获取数据的相同行为，并在不同的文件中使用 redux hooks （我的功能组件中的代码不起作用）？

在同一个项目中同时使用这两种方法是一种不好的做法吗？

Answer 1

您可以重现相同的行为，在函数组件中您可以仅使用选择器而不是同时使用 useSelector 和 useState:

const Mapping = (props) => {
    
  const foo = useSelector((state) => state.foo);
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(getFoo());
  }, []);

  ...

redux 钩子从 API 获取数据，并在单独的文件中执行操作

redux hook fetch data from API with action in separate file

reactjs

redux

redux-thunk

react-redux