Search code examples
javascriptreactjsreact-nativeredux-toolkit

Redux toolkit for react-native old project


How can I implement redux toolkit with same store ,reducer and dispatch which i already used in my project. Actually i don't want to create new store and reducer and dispatch methods.I'm trying to update the react-redux to latest version.

Please guide and help me.

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

`

Function used in 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);
  };

`


Solution

  • There's not really any point to switching to redux-toolkit with your current actions and reducers, but it can be done.

    Docs: Store Setup

    Right now you are calling the createStore function from the core redux package. Instead you need to call configureStore from the @reduxjs/toolkit package, which takes its arguments as named properties on an object.

    import { configureStore } from '@reduxjs/toolkit'
    import reducer from './reducer';
    
    const initialState = { /*... same as before ...*/};
    
    const store = configureStore({
      reducer,
      preloadedState: initialState
    });
    export default store;