用于 react-native 旧项目的 Redux 工具包

Question

我如何使用我已经在我的项目中使用的相同商店、reducer 和 dispatch 来实现 redux 工具包。 实际上我不想创建新的商店和减速器和调度方法。我正在尝试将 react-redux 更新到最新版本。

请指导和帮助我。

商店.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;
    }
}

`

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);
  };

`

Answer 1

使用当前的操作和 reducer 切换到 redux-toolkit 并没有什么意义，但可以做到。

文档：商店设置

现在您正在从核心redux包中调用createStore函数。 相反，您需要从@reduxjs/toolkit包中调用configureStore ，它将其参数作为对象的命名属性。

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

const initialState = { /*... same as before ...*/};

const store = configureStore({
  reducer,
  preloadedState: initialState
});
export default store;