react 状态管理

程序员小易

已于 2023-02-24 12:22:21 修改

阅读量104

点赞数

分类专栏： react 文章标签： react.js javascript 前端

于 2023-02-24 12:20:59 首次发布

本文链接：https://blog.csdn.net/yshijb/article/details/129198193

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文通过一个实例展示了如何在React应用中组织Redux的目录结构，包括actions、reducers、types和store的创建。主要涉及了action类型定义、reducer处理逻辑、action创建函数以及如何在组件中使用connect函数进行状态获取和更新。

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

目录结构

良好的文件结构可以便于业务功能的扩展

redux
	- actions/dom.ts
	- reducers/dom.ts
	- reducers/index.js
	- type/dom.ts
	- index.ts
- App.js

实例操作

下面通过实例讲解REACT-REDUX的使用

type/dom.ts 放置 action_type的动作名

// 定义常量
export const ADD_COUNT = "ADD_COUNT";
export const SUB_COUNT = "SUB_COUNT";

export type ContactState = {
  count: number;
};

export type AddAction = {
  type: typeof ADD_COUNT;
  num: number;
};
export type SubAction = {
  type: typeof SUB_COUNT;
  num: number;
};

export type ContactActionTypes = SubAction | AddAction;

reducers/dom.ts 用于状态处理动作

import {
  ADD_COUNT,
  ContactActionTypes,
  ContactState,
  SUB_COUNT,
} from "../types/dom";

// 定义一个状态
let initialState: ContactState = {
  count: 666,
};

// 利用reducer将store和action串联起来
function reducer(
  state = initialState,
  action: ContactActionTypes
): ContactState {
  switch (action.type) {
    case ADD_COUNT:
      return { count: state.count + action.num };
    case SUB_COUNT:
      return { count: state.count - action.num };
    default:
      return state;
  }
}

export default reducer;

3.reducers/index.ts 用于合并reduces

//用于合并多个reducer
import { combineReducers } from "redux";
import reducer from "./dom";

export default combineReducers({
  reducer,
});

4.actions/dom.ts 用于调用reducers处理动作，简化组件中的实现代码

import { ADD_COUNT, ContactActionTypes, SUB_COUNT } from "../types/dom";

export const addAction = (num: number): ContactActionTypes => {
  return { type: ADD_COUNT, num: num };
};
export const subAction = (num: number): ContactActionTypes => {
  return { type: SUB_COUNT, num: num };
};
//异步操作
export const list=id=>dispatch=>{
	axios.get(id).then((response)=>{
		dispatch(response.data)
	})
}

5.index.js 用于创建store对象

import {
  legacy_createStore as createStore,
  applyMiddleware,
  Action,
} from "redux";
import thunk, { ThunkAction } from "redux-thunk";
import reducer from "./reducers";
import { composeWithDevTools } from "redux-devtools-extension";
// 利用store来保存状态（state）
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));

export default store;
export type RootState = ReturnType<typeof reducer>;

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

6.main.tsx入口文件中传递store

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import store from "./store/index";
import { Provider } from "react-redux";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

组件使用

import React, { Component } from "react";
import { Dispatch } from "redux";
import { connect } from "react-redux";
import "./App.css";
import { RootState } from "./store";
interface Props {
  name: string;
  getInfo: any;
}
class App extends Component<Props> {
  constructor(props: Props) {
    super(props);
  }
 
  render(): React.ReactNode {
    return (
      <div className="App">
             <AA></AA>
      </div>
    );
  }
}
function mapStateToProps(state: RootState) {
  return { xxx: state.xxx };
}
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    getInfo: () => dispatch(xxx()),
  };
};
//https://react-redux.js.org/api/hooks 函数组件使用状态看这篇文章
class AA extends Component {
   render(): React.ReactNode {
    return <div>asdadadadasadas</div>;
   }
 }

export default connect(mapStateToProps, mapDispatchToProps)(App);