理解 Redux 与 React

这是我之前关于如何独立理解 Redux 以及它解决了 context API 无法解决的问题的文章的后续。想要深入了解 Redux 的重要性，这里有一篇很棒的文章。

如何将 React 与 Redux 结合使用

Redux 负责处理 store 的创建、中间件和 reducer 逻辑。要将其与 React 结合使用，我们需要所有组件都拥有一个 Redux store 实例，该实例可以通过Provider（使用 Context API）获取。为了从 store 获取状态和调度方法，我们可以使用react-redux 包中的connect 函数。在 Redux 7.0 之后，我们可以使用useSelector和useDispatch hooks，而无需使用mapStateToProps和mapDispatchToProps来包装组件。

让我们构建一个 React/Redux 项目

我们将继续构建本文中讨论的项目，但这次我们还将构建 React UI。

该项目将提供两种账户类型的用户界面：活期账户和储蓄账户。此外，还将提供银行客户列表。

首先我们需要安装以下依赖项。

该项目的目录结构如下：

在上一节中，我们已经了解了如何设置 action creator、reducer 以及组合 reducer。Redux
store 现在的样子如下：

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import logger from "redux-logger";
import rootReducer from "./rootReducer";

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(logger, thunk))
);

export default store;

Store 实例将通过 Provider 沿组件树传递

import { Provider } from "react-redux";
import store from "./redux/store";

export default function App() {
  return (
    <Provider store={store}>
      <div className="App">   
      ...    
      </div>
    </Provider>
  );
}

要订阅 store，我们需要使用useSelector钩子；要获取 dispatch 函数，我们需要useDispatch钩子。之前的connect函数用 Typescript 很难设置，但现在这些钩子可以轻松实现 TS 集成。

export default CurrentAccounts = () => {
  const amount = useSelector((state) => state.current.amount);
  const dispatch = useDispatch();

  return (
    <div>
      <label>Current Account</label>
      <h3>{amount}</h3>
      <div>
        <button onClick={() => dispatch(withdrawMoneyCurrent())}>
          Withdraw
        </button>
        <button onClick={() => dispatch(depositMoneyCurrent())}>Depoist</button>
      </div>
    </div>
  );
};

异步动作创建器
我们已经使用redux-thunk在加载、成功、错误状态下调用调度函数来获取数据。

export const fetchCurrentUsers = () => {
  return function (dispatch) {
    dispatch(fetchStatusLoading);
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        const data = res.data.map((item) => ({ id: item.id, name: item.name }));
        dispatch(fetchStatusSuccess(data));
      })
      .catch((error) => {
        dispatch(fetchSatusError(error.message));
      });
  };
};

👇 这是练习上述概念的完整沙盒

如果您有Redux Dev Tools chrome 扩展，那么您可以重播状态转换、调度自定义函数并生成测试。

如果你只使用 Redux 来获取数据并将其保存到集中式存储，那么还有另一种方法可以实现更高效的缓存性能和更少的代码量，那就是Redux Query。Dan 的博客“何时不使用 Redux”也值得一读。

鏂囩珷鏉ユ簮锛�https://dev.to/bhupendra1011/understanding-redux-with-react-27li