React与功能组件

Question

这是一个非常简单的工作示例，使用React从app.com/user/:userId中选择一个用户，然后从远程API获取/显示该用户的信息。

我可以在网上找到的大多数示例/代码都使用基于类的组件，但是由于我已经有了使用功能方法编写的项目的一部分，所以我正在寻找关于如何将redux集成到功能组件中的反馈。我也不是一个Javascript专家，以任何方式，所以一般的批评，我的JS，以及欢迎！

Store.js：

import { createStore } from "redux";

const initialUser = { user: [] };

const userReducer = (state = initialUser, action) => {
  switch (action.type) {
    case "ADD_USER":
      return Object.assign({}, state, { user: action.user });
    default:
      return state;
  }
};

export default function Store() {
  return createStore(userReducer);
}

Actions.js：

const validResp = (resp) => {
  return resp.data.code === 200;
};

const extractUser = (resp) => {
  return resp.data.data;
};

export const addUser = (resp) => {
  let user = "";

  if (validResp(resp)) {
    user = extractUser(resp);
  }

  return {
    type: "ADD_USER",
    user: user
  };
};

index.js：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter as Router, Route } from "react-router-dom";

import AppContainer from "./AppContainer";
import Store from "./Store";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={Store()}>
    <Router>
      <Route path="/user/:userId" component={AppContainer} />
    </Router>
  </Provider>,
  rootElement
);

AppContainer.js：

import React from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import axios from "axios";

import { addUser } from "./Actions";

const baseUrl = "https://gorest.co.in/public-api/users/";

export default function AppContainer() {
  const url = baseUrl + useParams().userId;
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();

  useEffect(() => {
    axios.get(url).then((resp) => dispatch(addUser(resp)));
  });

  return <App user={user} />;
}

function App(props) {
  return (
    <div className="App">
      Name: {props.user.name} <br />
      id: {props.user.id}
    </div>
  );
}

Answer 1

简洁的合并对象可以用扩展语法而不是Object.assign来完成。ADD_USER案例可以使用：

return { ...state, user: action.user };

在这里使用扩展语法而不是Object.assign不会产生太大的影响，但是当状态结构变得庞大和复杂时，它会使事情变得非常容易。

函数式编程不会重新分配变量--所有内容都应该用const声明。如果希望更实用，请将addUser更改为使用条件运算符将空字符串或extractUser结果赋值给user变量：

export const addUser = (resp) => {
  const user = validResp(resp) ? extractUser(resp) : "";
  return {
    type: "ADD_USER",
    user
  };
};

(请注意，如果键的名称与值所在的变量相同，则可以使用如上所述的速记属性名称。还可以一次返回整个对象，而无需首先声明一个user变量。)

useEffect错误，因为您没有向useEffect提供依赖数组，因此它的回调将在每次呈现时运行。我很确定这是不可取的-你希望它只运行在最初的渲染，对吗？将一个空依赖项数组传递给useEffect，以便内部的回调只在挂载上运行：

useEffect(() => {
  axios.get(url).then((resp) => dispatch(addUser(resp)));
}, []);

如果axios.get承诺拒绝，则错误处理不会给出任何指示。.catch总是在某个地方做出承诺。你可能想要的东西

useEffect(() => {
  axios.get(url)
    .then((resp) => dispatch(addUser(resp)))
    .catch((error) => dispatch(addError(error.message)));
}, []);

或类似的东西，以表明发生了错误。