使用redux和rtk query

使用Redux和RTK Query.md

使用Redux和RTK Query一起在项目中管理状态和数据请求，可以简化数据处理和状态管理的流程。下面是基本的思路和文件结构：

基本思路

  1. Redux Store：设置Redux store来管理全局状态。
  2. RTK Query API Slices：使用RTK Query定义API slices来处理数据请求。
  3. Reducers：将RTK Query生成的reducers和你的自定义reducers合并到Redux store中。
  4. Selectors：使用selectors来选择和派生数据。
  5. 中间件：将RTK Query的middleware添加到Redux store中。

文件结构

以下是一个推荐的文件结构：

src/
│
├── app/
│   ├── store.js              // Redux store 配置
│   └── rootReducer.js        // 合并reducers
│
├── features/
│   ├── someFeature/
│   │   ├── someFeatureSlice.js  // Redux slice for some feature
│   │   ├── someFeatureAPI.js    // RTK Query API slice for some feature
│   │   └── SomeFeatureComponent.jsx  // React component for this feature
│   └── ...
│
└── components/
    └── CommonComponent.jsx     // 通用组件

配置Redux Store

src/app/store.js

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';
import { someFeatureAPI } from '../features/someFeature/someFeatureAPI';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(someFeatureAPI.middleware),
});

export default store;

src/app/rootReducer.js

import { combineReducers } from '@reduxjs/toolkit';
import someFeatureReducer from '../features/someFeature/someFeatureSlice';
import { someFeatureAPI } from '../features/someFeature/someFeatureAPI';

const rootReducer = combineReducers({
  someFeature: someFeatureReducer,
  [someFeatureAPI.reducerPath]: someFeatureAPI.reducer,
});

export default rootReducer;

定义RTK Query API Slice

src/features/someFeature/someFeatureAPI.js

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const someFeatureAPI = createApi({
  reducerPath: 'someFeatureAPI',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    fetchItems: builder.query({
      query: () => 'items',
    }),
  }),
});

export const { useFetchItemsQuery } = someFeatureAPI;

定义Redux Slice

src/features/someFeature/someFeatureSlice.js

import { createSlice } from '@reduxjs/toolkit';

const someFeatureSlice = createSlice({
  name: 'someFeature',
  initialState: {},
  reducers: {
    // Your reducers here
  },
});

export const { actions, reducer } = someFeatureSlice;
export default reducer;

使用组件

src/features/someFeature/SomeFeatureComponent.jsx

import React from 'react';
import { useFetchItemsQuery } from './someFeatureAPI';

const SomeFeatureComponent = () => {
  const { data, error, isLoading } = useFetchItemsQuery();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SomeFeatureComponent;

入口文件

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './app/store';
import SomeFeatureComponent from './features/someFeature/SomeFeatureComponent';

ReactDOM.render(
  <Provider store={store}>
    <SomeFeatureComponent />
  </Provider>,
  document.getElementById('root')
);

通过这种结构和配置，你可以有效地管理Redux和RTK Query一起使用的状态和数据请求，从而使代码更加简洁和可维护。

Written on July 1, 2024