目录结构
良好的文件结构可以便于业务功能的扩展
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);