如何在React Native旧项目中迁移Redux Toolkit并保留原有核心逻辑

需求描述 #

我需要在现有React Native项目中接入Redux Toolkit，但要完全保留当前正在使用的Store、Reducer和Dispatch调用方式，不需要重新编写相关逻辑。同时我正在尝试把react-redux升级到最新版本，求具体的实施步骤。

项目现有代码如下：

现有store.js #

import { createStore } from 'redux';

const initialState = {
    SelectIdForm: [],
    OrgList: [],
    OrgListLength: "",
    RequesterList: [],
    getUserStatus: "",
    TicketDetails: [],
    UsersList: [],
    UsersListLength: "",
    helpTopicMentMultopleSelect: -1,
    departMentMultopleSelect: -1,
    storeIndexValueOfHelpdesk: -1,
    storeIndexValueOfDepartment: -1
};
import reducer from './reducer';
const store = createStore(reducer, initialState);
export default store;

现有reducer.js #

export default (state, action) => {

    switch (action.type) {
        case "SEARCHRESULT":
            return {
                ...state,
                searchTicket: action.payload,
            }
        case "USERNAME":
            return {
                ...state,
                userName: action.payload,
            }
        case "SEARCHDATA":
            return {
                ...state,
                SearchData: action.payload,
            }
        case "DEPARTMENTSSUPPLEMENTS":
            return {
                ...state,
                departments_supplements_Id: action.payload,
            }
        case "HELPTOPICSUPPLEMENTS":
            return {
                ...state,
                help_topic_supplements_Id: action.payload,
            }
        case "ALLSHOWINGTICKET":
            return {
                ...state,
                AllTIcketShowing: action.payload,
            }
        case "TICKETLENGHT":
            return {
                ...state,
                TicketLenght: action.payload,
            }
        case "TICKETDETAILS":
            return {
                ...state,
                TicketDetails: action.payload,
            }
        case "GET_USER_STARTED":
            return {
                ...state,
                getUserStatus: 'STARTED',
            }
        case "GET_USER_SUCCESS":
            return {
                ...state,
                getUserStatus: 'SUCCESS',
            }
        case "GET_USER_FAILED":
            return {
                ...state,
                getUserStatus: 'FAILED',
            }
        case "USERSLIST":
            return {
                ...state,
                UsersList: action.payload,
            }
        case "ORGLIST":
            return {
                ...state,
                OrgList: action.payload,
            }
        case "USERSLISTLENGTH":
            return {
                ...state,
                UsersListLength: action.payload,
            }
        case "ORGLISTLENGTH":
            return {
                ...state,
                OrgListLength: action.payload,
            }

        case "PROFILEIMAGE":
            return {
                ...state,
                ProfileImage: action.payload,
            }
        case "PROFILENAME":
            return {
                ...state,
                ProfileName: action.payload,
            }
        case "APIENDPOINT":
            return {
                ...state,
                ApiEndPoint: action.payload,
            }
        case "TOTALTICKETLENGHT":
            return {
                ...state,
                TotalTicketLenght: action.payload,
            }
        case "PAGECHANGE":
            return {
                ...state,
                PageChange: action.payload,
            }
        case "DRAWERITEMLISTLENGTH":
            return {
                ...state,
                DrawerItemListLengh: action.payload,
            }
        case "DRAWERITEMLIST":
            return {
                ...state,
                DrawerItemList: action.payload,
            }
        case "UPDATEDRAWERITEMLISTLENGTH":
            return {
                ...state,
                UpdateDrawerItemListLength: action.payload,
            }
        case "CATEGORY":
            return {
                ...state,
                SelectCategory: action.payload,
            }
        case "HELPTOPICSENDINGNODEDATA":
            return {
                ...state,
                sendingNodeDataHelpTopic: action.payload,
            }
        case "DEPARTSENDINGNODEDATA":
            return {
                ...state,
                sendingNodeDataDepart: action.payload,
            }
        case "SERACHBOTTOMTRUE":
            return {
                ...state,
                searchButtomTrue: action.payload,
            }
        case "RESETSEARCHDATA":
            return {
                ...state,
                resetSearchData: action.payload,
            }
        case "TITLESET":
            return {
                ...state,
                setTitle: action.payload,
            }
        case "INBOXANDREPLYISTRUE":
            return {
                ...state,
                replyAndInboxIsTrue: action.payload,
            }
        case "ALLCHECKTICKET":
            return {
                ...state,
                AllCheckTicket: action.payload,
            }
        case "ALLCHECKTICKETTREAD":
            return {
                ...state,
                AllCheckTicketThread: action.payload,
            }
        case "REPLYPAGECOLLABO":
            return {
                ...state,
                ReplyPageCollabo: action.payload,
            }
        case "USERINFOID":
            return {
                ...state,
                UserInfoID: action.payload,
            }
        case "HIDEBUTTOM":
            return {
                ...state,
                HideBottomOnThread: action.payload,
            }
        case "CLOSEDBUTTOM":
            return {
                ...state,
                ClosedButtomOnThread: action.payload,
            }
        case "CHANGESTATUS":
            return {
                ...state,
                ChangeStatus: action.payload
            }
        case "USERLISTLENGTH":
            return {
                ...state,
                UserListLenth: action.payload
            }
        case "USERLISTINBOXPAGELENGTH":
            return {
                ...state,
                UserListInboxLenth: action.payload
            }
        case "USERLIST":
            return {
                ...state,
                UserList: action.payload
            }
        case "USERSAPIENDPOINT":
            return {
                ...state,
                UserApiEndPoint: action.payload
            }
        case "USERCREATEAFTERLOGIN":
            return {
                ...state,
                UserCreateAfterLogin: action.payload
            }
        case "ORGANISATIONSELECTVALUE":
            return {
                ...state,
                OrganisationSelectValue: action.payload
            }
        case "OWNERIDTRUE":
            return {
                ...state,
                OwnerIdTrue: action.payload
            }
        case "OWNERID":
            return {
                ...state,
                OwnerId: action.payload
            }
        case "ORGANIZATIONIDTRUE":
            return {
                ...state,
                OrganizationsIdTrue: action.payload
            }
        case "ORGANIZATIONID":
            return {
                ...state,
                OrganizationsId: action.payload
            }
        case "RETURNSAMEPAGE":
            return {
                ...state,
                ReturnSamePage: action.payload
            }
        case "SAVENEWUSERDETAIL":
            return {
                ...state,
                SaveNewUserData: action.payload
            }
        case "FROMLOGINPAGETOUSERREG":
            return {
                ...state,
                FromLoginTOuserReg: action.payload
            }
        case "RETURNEDITTICKET":
            return {
                ...state,
                returnEditTicket: action.payload
            }
        case "BACKEDITTICKET":
            return {
                ...state,
                backEditTicket: action.payload
            }

        case "SHOWINGINEDITTICKET":
            return {
                ...state,
                showingUserInEditTicket: action.payload
            }
        case "PANEL":
            return {
                ...state,
                panel: action.payload
            }
        case "FILTERAPI":
            return {
                ...state,
                filterApitrue: action.payload
            }
        case "GETTICKETTHREAD":
            return {
                ...state,
                getTicketThread: action.payload
            }
        case "STORECCDATA":
            return {
                ...state,
                storeCCData: action.payload
            }
        case "DEPARTMULTIPLESELECT":
            return {
                ...state,
                departMentMultopleSelect: action.payload
            }
        case "HELPTOPICMULTIPLESELECT":
            return {
                ...state,
                helpTopicMentMultopleSelect: action.payload
            }
        case "STOREINDEXVALUEOFHELPTOPICNODE":
            return {
                ...state,
                storeIndexValueOfHelpdesk: action.payload
            }
        case "STOREINDEXVALUEOFDEPARTMENTNODE":
            return {
                ...state,
                storeIndexValueOfDepartment: action.payload
            }

        case "GOBACK":
            return {
                ...state,
                goBack: action.payload
            }

        default:
            return state;
    }
}

组件中现有Dispatch用法（userlist.js） #

AddUser = () => {
    this.props.dispatch({ type: "CATEGORY", payload: "user" });
    this.props.dispatch({ type: "PANEL", payload: "agent" });
    this.props.dispatch({ type: "USERCREATEAFTERLOGIN", payload: true });
    this.props.dispatch({ type: "RETURNEDITTICKET", payload: false });
    this.props.dispatch({ type: "RETURNSAMEPAGE", payload: false });
    this.props.dispatch({ type: "FROMLOGINPAGETOUSERREG", payload: false });
    this.props.navigation.push(AppRoutes.CREATETICKET);
  };

实施步骤 #

1. 安装依赖 #

首先安装Redux Toolkit和最新版react-redux：

npm install @reduxjs/toolkit react-redux@latest
# 或使用yarn
yarn add @reduxjs/toolkit react-redux@latest

2. 改造Store配置（仅修改store.js） #

Redux Toolkit的configureStore完全兼容传统reducer，不需要修改现有reducer代码，仅替换createStore为configureStore即可：

改造后的store.js：

import { configureStore } from '@reduxjs/toolkit';
import reducer from './reducer';

const initialState = {
    SelectIdForm: [],
    OrgList: [],
    OrgListLength: "",
    RequesterList: [],
    getUserStatus: "",
    TicketDetails: [],
    UsersList: [],
    UsersListLength: "",
    helpTopicMentMultopleSelect: -1,
    departMentMultopleSelect: -1,
    storeIndexValueOfHelpdesk: -1,
    storeIndexValueOfDepartment: -1
};

// configureStore自动包含redux-thunk等常用中间件，完全兼容现有reducer
const store = configureStore({
  reducer: reducer,
  preloadedState: initialState
});

export default store;

3. 验证现有组件代码无需修改 #

你现有组件中（比如userlist.js的AddUser方法）的dispatch调用方式，完全兼容最新版react-redux和Redux Toolkit，不需要做任何改动。不管是通过connect高阶组件注入的dispatch，还是用useDispatch钩子获取的dispatch，都能正常触发原有action类型。

4. 可选：逐步迁移到Redux Toolkit的Slice（非必须） #

如果后续想逐步使用Redux Toolkit的特性，可以把部分reducer逻辑迁移到createSlice，原有reducer和新slice可以共存，不影响现有代码运行。示例如下：

创建新的userSlice.js：

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

const userSlice = createSlice({
  name: 'user',
  initialState: {
    userName: '',
    UserInfoID: ''
  },
  reducers: {
    setUserName: (state, action) => {
      state.userName = action.payload;
    },
    setUserInfoID: (state, action) => {
      state.UserInfoID = action.payload;
    }
  }
});

export const { setUserName, setUserInfoID } = userSlice.actions;
export default userSlice.reducer;

修改store.js合并原有reducer和新slice：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducer';
import userReducer from './userSlice';

const initialState = {
    // 原有初始状态
};

const store = configureStore({
  reducer: {
    root: rootReducer, // 原有reducer作为root分支
    user: userReducer // 新slice作为user分支
  },
  preloadedState: {
    root: initialState // 对应root分支的初始状态
  }
});

export default store;

此时原有dispatch调用依然有效，同时可以在新组件中使用slice生成的action creators。

内容的提问来源于stack exchange，提问作者Deepak Sharma