ReatctHooks中使用redux

xjc233

于 2022-09-28 17:34:42 发布

阅读量271

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/xjc2333333/article/details/127093435

版权

本文介绍了如何在React Hooks项目中使用Redux进行状态管理。首先，需要安装redux和react-redux依赖。接着，创建store目录并配置reducer模块。在App.tsx中使用Provider包裹组件以启用Redux。在登录场景中，将用户信息存储到Redux，初始状态下提供默认数据。然后，展示如何更新数据，并在其他组件中获取和使用Redux中的数据。

摘要由CSDN通过智能技术生成

使用redux的话需要先安装两个依赖redux与react-redux

1. 安装好之后，创建一个名为store的文件夹，用来当作容器，配置文件写到这里面

import { createStore, applyMiddleware, compose } from "redux";
import thunkMiddleware from "redux-thunk";
import rootReducer from "../reducers";

const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const middlewares = [thunkMiddleware];

if (
  process.env.NODE_ENV === "development" &&
  process.env.TARO_ENV !== "quickapp"
) {
  middlewares.push(require("redux-logger").createLogger());
}

const enhancer = composeEnhancers(
  applyMiddleware(...middlewares)
  // other store enhancers if any
);

expor