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);
};
`
There's not really any point to switching to redux-toolkit with your current actions and reducers, but it can be done.
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;